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 maintenant je souhaite 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 de tranche, je pensais que c'était ce code pour supprimer certaines données du tableau. Quelle est la meilleure façon et la plus propre de supprimer des données du tableau avec un bouton simpleb et un événement onclick?

Vous utilisez spliceune mauvaise manière.

Les surcharges sont:

array.splice (début)

array.splice (start, deleteCount)

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

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

Alors 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, vous y accédez donc directement, pas avec this.event.

Mais de cette façon, vous rechercherez inutile le indexOfdans chaque suppression, pour résoudre ce problème, vous pouvez définir la indexvariable à votre v-for, puis la passer à 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);
}

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

N'oubliez pas de lier l' attribut clé sinon toujours le dernier élément sera 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>

scénario

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

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

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

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>

Vous pouvez supprimer l'élément via l'identifiant

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

À l'intérieur de 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 des mises à jour de vue. Cliquez ici pour plus de détails.

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

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

Et pour votre JS:

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

Splice est le meilleur pour supprimer un élément d'un index spécifique. L'exemple donné est testé sur console.

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

beginIndex commence à 0.

Pourquoi ne pas simplement omettre la méthode tous ensemble comme:

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