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也是如此，但是fronend没有反应，所以只有在页面刷新后才能从表中删除该项目。如何删除相关的<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);
}

Answer 3

您可以尝试将@click="fireDelete(item.id)"部分修改为自定义方法@click='deleteData(items, item.id)'

并执行以下操作：

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

，您的模板可以做到：

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

使用VueJS从表中删除行

3 个答案: