在 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>
?
最佳答案
我已经想出了一个好方法。我将索引传递给 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));
}
关于vuejs2 - 使用 VueJS 从表中删除行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42533862/