vuejs2 - 使用 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));
      }