使用VueJS从表中删除行

Question

在Vue中，删除项目后如何从表格中删除行？

下面是我渲染表格的方式

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

以下是我的Vue组件的摘录。

data() {
      return {
        items: []
      }
    },

methods: {
    fireDelete(id) {
        axios.delete('/item/'+id).then();
    }
},
mounted() {
      axios.get('/item').then(response => this.items = response.data);
    }

axios.get可以工作，而axios.delete也可以，但是朋友没有反应，因此仅在刷新页面后才从表中删除该项目。我如何删除相关内容<tr>？

Answer 1

我设法找到了一个很好的方法。我将索引传递给 fireDelete 方法并使用 splice 函数。完全按照我想要的方式工作。

<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

我遇到了和这个问题一样的麻烦。所以也许有人会发现这很有用。

对于button使用：

v-if="items.length > 1" v-on:click="fireDelete(index)"

和fireDelete功能：

fireDelete: function (index) { 
    this.photos.splice(index, 1);
}