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

Vous utilisez splice d'une mauvaise manière.

Les surcharges sont :

array.splice(start)

array.splice(start, deleteCount)

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

Start signifie l'index que vous voulez commencer, pas l'élément que vous voulez enlever. Et vous devez passer le deuxième paramètre deleteCount comme 1, ce qui signifie : "Je veux supprimer 1 élément commençant à l'indice {start}".

Donc tu ferais mieux d'y aller avec :

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

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

Mais de cette façon, vous allez chercher inutilement pour le indexOf dans chaque suppression, pour résoudre ce problème, vous pouvez définir la fonction index variable à votre v-for et de le transmettre à la place de l'objet événement.

C'est-à-dire :

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

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

Et :

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

Answer 2

Vous pouvez également utiliser .$delete :

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

sources :

• https://vuejs.org/v2/api/#Vue-delete
• https://medium.com/vuejs-tips/tip-3-deleting-array-index-in-vue-js-8cc31d7214bf

Answer 3

N'oubliez pas de relier clé attribut sinon toujours dernier l'élément sera supprimé

La manière correcte de 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
}

Answer 4

C'est encore plus drôle lorsque vous le faites avec des intrants, car ils devraient être liés. Si vous souhaitez savoir comment le faire dans Vue2 avec des options d'insertion et de suppression, veuillez consulter un exemple :

Jetez un coup d'œil et js fiddle

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/vue@2.5.3/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>

Answer 5

Vous pouvez supprimer un élément par le biais de l'id

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

Dans votre code JS

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

Vue enveloppe les méthodes de mutation d'un tableau observé afin qu'elles déclenchent également des mises à jour de la vue. Cliquez ici pour plus de détails.

Vous pourriez penser que Vue va jeter le DOM existant et rendre à nouveau la liste entière - heureusement, ce n'est pas le cas.