[解決済み] 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

});

私はイベントを関数に渡して、スライス関数でその1つを削除しようとしましたが、私はそれが配列からいくつかのデータを削除するためのコードだと思いました。シンプルなボタンとonclickイベントで配列からデータを削除するための最良の、そして最もクリーンな方法は何ですか？

どのように解決するのですか？

あなたが使用している splice を間違った方法で使っています。

オーバーロードは

array.splice(開始)

array.splice(start、deleteCount)

array.splice(start、deleteCount、itemForInsertAfterDeletion1、itemForInsertAfterDeletion2、・・・)

Startは、削除したい要素ではなく、開始したいインデックスを意味します。そして、2番目のパラメータとして deleteCount を1として渡す必要があります。これは、次のような意味になります。

で行った方がいいんですね。

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

また、パラメータを使用しているので、パラメータに直接アクセスします。 this.event .

しかし、この方法では、不要な indexOf を探すことになります。これを解決するために index 変数を v-for で、イベントオブジェクトの代わりにそれを渡します。

ということです。

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

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

そして

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