如何在 Vue.js 中从数组中删除项

我是 vue.js (2)的新手，目前正在开发一个简单的事件应用程序。我已经设法添加事件，但现在我想删除事件的基础上点击一个按钮。

超文本标示语言

    <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


});

我试过把事件传递给函数然后用切片函数删除它，我以为是从数组中删除数据的代码。使用 simpleb 按钮和 onclick 事件从数组中删除数据的最佳方法是什么？

264995 次浏览
小开
最佳答案

你使用 splice的方式不对。

超载包括:

Splice (start)

Splice (开始，删除计数)

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

And:

deleteEvent: function(index) {
this.events.splice(index, 1);
}
小开

在使用输入进行操作时更有趣，因为它们应该是绑定的。如果您对如何在 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);
}
}
});
<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
<div id="app">
<h1>Finds</h1>
<div v-for="(find, index) in finds">
<input v-model="find.value">
<button @click="deleteFind(index)">
delete
</button>
</div>
  

<button @click="addFind">
New Find
</button>
  

<pre>\{\{ $data }}</pre>
</div>

小开

你也可以使用。 $delete:

remove (index) {
this.$delete(this.finds, index)
}

资料来源:

小开

不要忘记绑定 钥匙属性，否则总是 最后项将被删除

从数组中删除选定项的正确方法:

模板

<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
}
小开

您可以通过 id 删除项目

<button @click="deleteEvent(event.id)">Delete</button>

在您的 JS 代码中

deleteEvent(id){
this.events = this.events.filter((e)=>e.id !== id )
}

Vue 包装了观察到的数组的变异方法，这样它们也会触发视图更新。

You might think this will cause Vue to throw away the existing DOM and re-render the entire list - luckily, that is not the case.

小开 
<v-btn color="info" @click="eliminarTarea(item.id)">Eliminar</v-btn>

至于你的 JS:

this.listaTareas = this.listaTareas.filter(i=>i.id != id)
小开

拼接是从特定索引中删除元素的最佳方法 在控制台上进行测试。

card = [1, 2, 3, 4];
card.splice(1,1);  // [2]
card   // (3) [1, 3, 4]
splice(startingIndex, totalNumberOfElements)

StartingIndex 从0开始。

小开

为什么不干脆省略这些方法呢，比如:

v-for="(event, index) in events"
...
<button ... @click="$delete(events, index)">
小开

可以使用 indexOf 从数组中获取当前索引

remove: function (event){
this.events.splice(this.events.indexOf(event),1);
},

提交答案