如何从 Vue.js 中的数组中删除项目 [英] How to remove an item from an array in Vue.js

问题描述

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

HTML

 
<div class="list-group-item" v-for="event in events"><h4 class="list-group-item-heading">{{ event.name }}<h5>{{ 活动日期 }}<p class="list-group-item-text" v-if="event.description">{{ event.description }}</p><button class="btn btn-xs btn-danger" @click="deleteEvent(event)">删除</button>

JS(Vue)

新的 Vue ({el: '#app',数据: {事件:[{编号:1，name: '事件 1',描述:'只是一些lorem ipsum'，日期:'2015-09-10'},{编号:2，name: '事件 2',描述:'只是另一个lorem ipsum'，日期:'2015-10-02'}],事件:{名称:''，描述:''，日期:''}},准备好:函数(){},方法: {删除事件:函数(事件){this.events.splice(this.event);},//添加一个事件到现有的事件数组添加事件:函数(){如果(this.event.name){this.events.push(this.event);this.event = { name: '', description: '', date: '' };}}}//方法结束});

我尝试将事件传递给函数，而不是使用 slice 函数删除该事件，我认为这是从数组中删除一些数据的代码.使用 simpleb 按钮和 onclick 事件从数组中删除数据的最佳和最干净的方法是什么?

解决方案

您以错误的方式使用了 splice.

重载是:

<块引用>

array.splice(开始)

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:函数(索引){this.events.splice(index, 1);}

I am new to vue.js (2) and I am currently working on a simple event app. I've managed to add events but now I would like to delete events based on clicking on a button.

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

});

I've tried to pass the event to the function and than delete that one with the slice function, I thought it was that code for deleting some data from the array. What is the best en cleanest way to delete data from the array with a simpleb button and onclick event?

解决方案

You're using splice in a wrong way.

The overloads are:

array.splice(start)

array.splice(start, deleteCount)

array.splice(start, deleteCount, itemForInsertAfterDeletion1, itemForInsertAfterDeletion2, ...)

Start means the index that you want to start, not the element you want to remove. And you should pass the second parameter deleteCount as 1, which means: "I want to delete 1 element starting at the index {start}".

So you better go with:

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

Also, you're using a parameter, so you access it directly, not with this.event.

But in this way you will look up unnecessary for the indexOf in every delete, for solving this you can define the index variable at your v-for, and then pass it instead of the event object.

That is:

v-for="(event, index) in events"
...

<button ... @click="deleteEvent(index)"

And:

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

这篇关于如何从 Vue.js 中的数组中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！