Removing a row from a table with VueJS - vuejs2

Question

In Vue how do you remove a row from a table when the item is deleted?
Below is how I am rendering the table
<tbody>
<tr v-for="item in items">
<td v-text="item.name"></td>
<td v-text="item.phone_number"></td>
<td v-text="item.email"></td>
<td><button #click="fireDelete(item.id)">Delete</button></td>
</tr>
</tbody>
Below is an excerpt from my Vue component.
data() {
return {
items: []
}
},
methods: {
fireDelete(id) {
axios.delete('/item/'+id).then();
}
},
mounted() {
axios.get('/item').then(response => this.items = response.data);
}
The axios.get work and so does the axios.delete, but the fronend doesn't react so the item is only removed from the table after a page refresh. How do I get it to remove the relevant <tr>?

Answer 1

I've managed to work out a nice way. I pass the index to the fireDelete method and use the splice function. Works exactly how I wanted.
<tbody>
<tr v-for="(item, index) in items" v-bind:index="index">
<td v-text="item.name"></td>
<td v-text="item.phone_number"></td>
<td v-text="item.email"></td>
<td><button #click="fireDelete(item.id, index)">Delete</button></td>
</tr>
</tbody>
fireDelete(id, index) {
axios.delete('/item/'+id).then(response => this.organisations.splice(index, 1));
}

Answer 2

I had the same trouble as this question. So maybe someone will find this usefull.
For the button use:
v-if="items.length > 1" v-on:click="fireDelete(index)"
And the fireDelete function:
fireDelete: function (index) {
this.photos.splice(index, 1);
}

Answer 3

You can try to modify your #click="fireDelete(item.id)" part to a custom method #click='deleteData(items, item.id)'
and do something like:
methods: {
deleteData (items, id) {
this.items = null // These parts may not
this.fireDelete(id) // match your exact code, but I hope
} // you got the idea.
}
and your template can do just:
<tbody>
<tr v-for="item in items" v-if='items'>
<td v-text="item.name"></td>
<td v-text="item.phone_number"></td>
<td v-text="item.email"></td>
<td><button #click="deleteData(item, item.id)">Delete</button></td>
</tr>
</tbody>