Come rimuovere un elemento da un array in Vue.js

Sono nuovo su vue.js (2) e attualmente sto lavorando a una semplice app per eventi. Sono riuscito ad aggiungere eventi ma ora vorrei eliminare gli eventi facendo clic su un pulsante.

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

});

Ho provato a passare l'evento alla funzione e poi a cancellarlo con la funzione slice, pensavo fosse quel codice per cancellare alcuni dati dall'array. Qual è il modo migliore e più pulito per eliminare i dati dall'array con un semplice pulsante b e un evento onclick?

Stai usando splicein modo sbagliato.

I sovraccarichi sono:

array.splice (inizio)

array.splice (start, deleteCount)

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

Inizio indica l'indice che desideri avviare, non l'elemento che desideri rimuovere. E dovresti passare il secondo parametrodeleteCount come 1, che significa: "Voglio eliminare 1 elemento a partire dall'indice {inizio}".

Quindi è meglio che tu vada con:

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

Inoltre, stai utilizzando un parametro, quindi puoi accedervi direttamente, non con this.event.

Ma in questo modo non sarà necessario cercare indexOfin ogni cancellazione, per risolverlo puoi definire la indexvariabile a tuo piacimento v-for, e poi passarla al posto dell'oggetto evento.

Questo è:

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

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

E:

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

Puoi anche usare. $ Delete:

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

fonti:

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

Non dimenticare di associare l' attributo chiave altrimenti sempre per ultimo verrà eliminato elemento

Modo corretto per eliminare l'elemento selezionato dall'array:

Modello

<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
}

È ancora più divertente quando lo fai con gli input, perché dovrebbero essere vincolati. Se sei interessato a come farlo in Vue2 con le opzioni per inserire ed eliminare, guarda un esempio:

per favore guarda un violino 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/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>

Puoi eliminare l'elemento tramite id

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

All'interno del tuo codice JS

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

Vue avvolge i metodi di mutazione di un array osservato in modo che attiveranno anche gli aggiornamenti della vista. Clicca qui per maggiori dettagli.

Potresti pensare che questo indurrà Vue a gettare via il DOM esistente e rieseguire il rendering dell'intero elenco - fortunatamente, non è così.

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

E per il tuo JS:

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

La giunzione è la soluzione migliore per rimuovere l'elemento dall'indice specifico. L'esempio fornito è testato su console.

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

StartingIndex inizia da 0.

Perché non omettere il metodo tutti insieme come:

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