使用 VueJS 从 table 中删除一行

Question

在 Vue 中，如何在删除项目时从 table 中删除一行？

下面是我如何渲染 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>

以下是我的 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 也有效，但前端没有反应，因此该项目仅在页面刷新后从 table 中删除。我如何才能删除相关的 <tr>?

Answer 1

您可以尝试将您的 @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>

Answer 2

我想出了一个好方法。我将索引传递给 fireDelete 方法并使用拼接函数。完全符合我的要求。

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

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

对于 button 使用：

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

和 fireDelete 函数：

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

使用 VueJS 从 table 中删除一行

Removing a row from a table with VueJS

vue-component

vuejs2