web-dev-qa-db-fra.com

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

Je suis nouveau sur vue.js (2) et je travaille actuellement sur une application événementielle simple. J'ai réussi à ajouter des événements, mais j'aimerais 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 transmettre l'événement à la fonction et de supprimer celui-ci avec la fonction slice. Je pensais que c'était ce code qui supprimait certaines données du tableau. Quel est le meilleur moyen de supprimer des données du tableau avec un bouton simpleb et un événement onclick?

javascriptvuejs2
61
Gijsberts

Vous utilisez splice de manière incorrecte.

Les surcharges sont:

array.splice (début)

array.splice (start, deleteCount)

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

Démarrer signifie l'index que vous souhaitez démarrer, pas l'élément que vous souhaitez supprimer. Et vous devriez passer le deuxième paramètre deleteCount à 1, ce qui signifie: "Je veux supprimer 1 élément à partir de l'index {début}".

Donc, vous feriez mieux d'aller avec:

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

De plus, vous utilisez un paramètre, vous y accédez donc directement, pas avec this.event.

Mais de cette façon, vous chercherez inutile pour le indexOf dans chaque suppression. Pour résoudre ce problème, vous pouvez définir la variable index sur votre v-for, puis le transmettre à la place de l'objet événement. .

C'est:

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

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

Et:

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

Vous pouvez également utiliser. $ Delete:

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

sources:

32
Katinka Hesselink

N'oubliez pas de lier l'attribut clé, sinon le dernier élément sera toujours supprimé

Méthode correcte pour supprimer l’élément sélectionné du tableau:

Modèle

<div v-for="(item, index) in items" :key="item.id">
  <input v-model="item.value">
   <button @click="deleteItem(index)">
  delete
</button>

script

deleteItem(index) {
  this.items.splice(index, 1); \\OR   this.$delete(this.items,index)
 \\both will do the same
}
10
Afraz Ahmad

C'est encore plus drôle quand vous le faites avec des entrées, car elles devraient être liées. Si vous êtes intéressé par la procédure à suivre dans Vue2 avec les options d’insertion et de suppression, consultez un exemple:

s'il vous plaît jeter un oeil un js violon

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/[email protected]/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>
6
Yevgeniy Afanasyev

Vous pouvez supprimer un élément via un identifiant

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

Dans votre code JS

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

Vue encapsule les méthodes de mutation d’un tableau observé afin qu’elles déclenchent également les mises à jour des vues. Cliquez ici pour plus de détails.

Vous pourriez penser que cela entraînera Vue à jeter le DOM existant et à refaire le rendu de la liste entière - heureusement, ce n'est pas le cas.

1
Masum Billah