CODEWITHSUNDEEP
vuejs2vue-component
Craig Ward
Craig Ward

Reputation: 2485

Removing a row from a table with VueJS

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>?

Upvotes: 9

Views: 15954

Answers (3)

Daria Shvydka
Daria Shvydka

Reputation: 51

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

Upvotes: 5

Craig Ward
Craig Ward

Reputation: 2485

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

Upvotes: 5

Amresh Venugopal
Amresh Venugopal

Reputation: 9549

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>

Upvotes: 1

Related Questions