如何从 Vue.js 中的数组中删除一个项目
我是 vue.js (2) 的新手，我目前正在开发一个简单的事件应用程序。我已经设法添加事件，但现在我想通过单击按钮来删除事件。
HTML
<div class="list-group">
<div class="list-group-item" v-for="event in events">
<h4 class="list-group-item-heading">
{{ event.name }}
</h4>
<h5>
{{ event.date }}
</h5>
<p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>
<button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
</div>
</div>
</div>
JS(Vue)
new Vue ({
el: '#app',
data: {
events: [
{
id: 1,
name: 'Event 1',
description: 'Just some lorem ipsum',
date: '2015-09-10'
},
{
id: 2,
name: 'Event 2',
description: 'Just another lorem ipsum',
date: '2015-10-02'
}
],
event: { name: '', description: '', date: '' }
},
ready: function() {
},
methods: {
deleteEvent: function(event) {
this.events.splice(this.event);
},
// Adds an event to the existing events array
addEvent: function() {
if(this.event.name) {
this.events.push(this.event);
this.event = { name: '', description: '', date: '' };
}
}
} // end of methods
});
我试图将事件传递给函数，而不是使用 slice 函数删除该事件，我认为这是用于从数组中删除一些数据的代码。使用 simpleb 按钮和 onclick 事件从数组中删除数据的最佳方式是什么？
您以错误的方式使用 splice。
重载是：
array.splice(start) array.splice(start, deleteCount) array.splice(start, deleteCount, itemForInsertAfterDeletion1, itemForInsertAfterDeletion2, ...)
Start 表示要开始的索引，而不是要删除的元素。您应该将第二个参数 deleteCount 作为 1 传递，这意味着：“我要删除从索引 {start} 开始的 1 个元素”。
所以你最好选择：
deleteEvent: function(event) {
this.events.splice(this.events.indexOf(event), 1);
}
此外，您正在使用参数，因此您可以直接访问它，而不是使用 this.event。
但是通过这种方式，您将在每次删除时查找不必要的 indexOf，为了解决这个问题，您可以在 v-for 处定义 index 变量，然后传递它而不是事件对象。
那是：
v-for="(event, index) in events"
...
<button ... @click="deleteEvent(index)"
和：
deleteEvent: function(index) {
this.events.splice(index, 1);
}
您也可以使用 .$delete：
remove (index) {
this.$delete(this.finds, index)
}
来源：
https://v2.vuejs.org/v2/api/#Vue-delete
https://medium.com/vuejs-tips/tip-3-deleting-array-index-in-vue-js-8cc31d7214bf
不要忘记绑定 key 属性，否则总是最后一项将被删除
从数组中删除所选项目的正确方法：
模板
<div v-for="(item, index) in items" :key="item.id">
<input v-model="item.value">
<button @click="deleteItem(index)">
delete
</button>
脚本
deleteItem(index) {
this.items.splice(index, 1); \\OR this.$delete(this.items,index)
\\both will do the same
}
<div v-for="(item, index) in items" :key="index"> 不起作用。
当您使用输入进行操作时会更有趣，因为它们应该被绑定。如果您对如何在 Vue2 中使用插入和删除选项进行操作感兴趣，请查看示例：
请看一下js fiddle
new Vue({ el: '#app', data: { finds: [] }, methods: { addFind: function () { this.finds.push({ value: 'def' }); }, deleteFind: function ( index) { console.log(index); console.log(this.finds); this.finds.splice(index, 1); } } });
发现
{{ $data }}
您可以通过 id 删除项目
<button @click="deleteEvent(event.id)">Delete</button>
在您的 JS 代码中
deleteEvent(id){
this.events = this.events.filter((e)=>e.id !== id )
}
Vue 包装了观察到的数组的变异方法，因此它们也会触发视图更新。 Click here 了解更多详情。
你可能认为这会导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，事实并非如此。
为什么不一起省略该方法，例如：
v-for="(event, index) in events"
...
<button ... @click="$delete(events, index)">
<v-btn color="info" @click="eliminarTarea(item.id)">Eliminar</v-btn>
对于你的 JS：
this.listaTareas = this.listaTareas.filter(i=>i.id != id)
您可以使用 indexOf 从数组中获取当前索引
remove: function (event){
this.events.splice(this.events.indexOf(event),1);
},
Splice 是从特定索引中删除元素的最佳方法。给定的示例在控制台上进行了测试。
card = [1, 2, 3, 4];
card.splice(1,1); // [2]
card // (3) [1, 3, 4]
splice(startingIndex, totalNumberOfElements)
起始索引从 0 开始。
关注公众号
不定期副业成功案例分享
v-for上定义索引变量':) 我喜欢这样的宝石。