Comment supprimer un élément d'un tableau dans Vue.js ?

Question

Je suis nouveau dans le domaine de vue.js (2) et je travaille actuellement sur une application événementielle simple. J'ai réussi à ajouter des événements mais je voudrais maintenant supprimer des événements en cliquant sur un bouton.

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

});

J'ai essayé de passer l'événement à la fonction puis de supprimer celui ci avec la fonction slice, je pensais que c'était ce code pour supprimer des données du tableau. Quelle est la meilleure et la plus propre façon de supprimer des données du tableau avec un simple bouton et un événement onclick ?

Answer 1

Pourquoi ne pas simplement omettre la méthode, par exemple :

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

Answer 2

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

Et pour votre JS :

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

Answer 3

Splice est le meilleur moyen de retirer un élément d'un index spécifique. L'exemple donné exemple est testé sur la console.

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

startingIndex commence à partir de 0.