Removing a row from a table with VueJS

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);
}