How to remove the html element using $http.delete in VueJS - vue.js

Question

I use $http.delete in a VueJS project to remove the users from a page. When I click on delete icon the user is delete it from the database but on the front end the html for that user is still on page. Will disappear if I refresh the page.
This whole HTML(down) is a user from a list of users, from a database. I tried wrapping the whole HTML with another div and use inside a v-if directive, but in this case will not show me any user.
So how can I remove the html element too, when I delete the user, without refreshing the page?
If there is another way to delete a user from database, beside this $http.delete, fell free to show it to me.
HTML
<template>
<div>
<div class="card visitor-wrapper">
<div class="row">
<div class="col-md-2">
<div class="checkbox checkbox-success">
<input type="checkbox" id="select-1">
<label for="select-1" style="width: 50px;"><img src="../../assets/icons/visitors-icon.svg" alt=""></label>
</div>
<i class="fa fa-user-o fa-2x" aria-hidden="true"></i>
</div>
<div class="col-md-3">
<p class="visitor-name">{{user.firstName}}</p>
<span class="visitor-email">{{user.userType}}</span>
</div>
<div class="col-md-2">
<p class="visitor-other-detail">{{user.rid}}</p>
</div>
<div class="col-md-2">
<p class="visitor-other-detail">{{user.departmentId}}</p>
</div>
<div class="col-md-2">
<p class="visitor-other-detail">{{createdDate(user.createdDate)}}</p>
</div>
<div class="col-md-1 divider-left">
<div class="edit-icon">
<router-link :to="'/users/edit-user/'+user.rid"><a data-toggle="tooltip" data-placement="top" title="Edit Employee"><i class="ti-pencil-alt" aria-hidden="true"></i></a></router-link>
</div>
<div class="trash-icon">
<a data-toggle="tooltip" data-placement="top" title="Delete Employee" #click="removeUser(user.rid)"><i class="ti-trash" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</template>
JS
export default {
props: ['user'],
methods: {
removeUser(item) {
this.$http.delete('/user/' + item)
.then((response) => {
console.log('response', response);
});
}
}
}

Answer 1

Set a v-if on the element that you want to have removed.
In your data you can have an attribute like; userIsActive or something which defaults to true. If your ajax call is a success you can set it to false which will make the element disappear with the v-if.
removeUser(item) {
this.$http.delete('/user/' + item)
.then((response) => {
this.userIsActive = false;
console.log('response', response);
});
}
Of course there are dozens of variations on how to do this but this might help you out.

Answer 2

you can use v-html for remove html text and only show text..
<p v-html="items"></p>