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

问题描述

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

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

});

我试图将事件传递给函数，而不是删除带有slice函数的函数，我以为是从数组中删除一些数据的代码。使用简单按钮和onclick事件从数组中删除数据的最简洁方法是什么？

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?

推荐答案

您正在使用以错误的方式拼接。

重载是：

array.splice（start）

array.splice(start)

array.splice（start，deleteCount）

array.splice(start, deleteCount)

array.splice（start，deleteCount，item1，item2，...）

array.splice(start, deleteCount, item1, item2, ...)

开始表示你想要的索引开始，而不是您要删除的元素。你应该将第二个参数 deleteCount 传递为1，这意味着：我想删除从索引{start}开始的1个元素。

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}".

所以你最好选择：

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

此外，您正在使用参数，因此您可以直接访问它，而不是使用 this.event 。

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

但是这样你就可以查找不必要的 indexOf 在每次删除时，为了解决这个问题，您可以在 v-for index 变量c>，然后传递它而不是事件对象。

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.

即：

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

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

并且：

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

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