So entfernen Sie ein Element aus einem Array in Vue.js.

Ich bin neu in vue.js (2) und arbeite derzeit an einer einfachen Event-App. Ich habe es geschafft, Ereignisse hinzuzufügen, aber jetzt möchte ich Ereignisse löschen, indem ich auf eine Schaltfläche klicke.

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

});

Ich habe versucht, das Ereignis an die Funktion zu übergeben und dann dieses mit der Slice-Funktion zu löschen. Ich dachte, es wäre dieser Code zum Löschen einiger Daten aus dem Array. Was ist der beste und sauberste Weg, um Daten mit einer einfachen Schaltfläche und einem Ereignis mit einem Klick aus dem Array zu löschen?

Sie verwenden splicefalsch.

Die Überlastungen sind:

array.splice (Start)

array.splice (start, deleteCount)

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

Start bedeutet den Index, den Sie starten möchten, nicht das Element, das Sie entfernen möchten. Und Sie sollten den zweiten Parameter deleteCountals 1 übergeben, was bedeutet: "Ich möchte 1 Element ab dem Index {start} löschen".

Also gehen Sie besser mit:

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

Außerdem verwenden Sie einen Parameter, sodass Sie direkt darauf zugreifen können, nicht mit this.event.

Auf diese Weise werden Sie jedoch indexOfbei jedem Löschvorgang unnötig nachschlagen. Um dies zu lösen, können Sie die indexVariable an Ihrem definieren v-forund dann anstelle des Ereignisobjekts übergeben.

Das ist:

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

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

Und:

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

Sie können auch verwenden. $ Delete:

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

Quellen:

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

Vergessen Sie nicht, das Schlüsselattribut zu binden , da sonst immer das letzte Element gelöscht wird

Richtige Methode zum Löschen des ausgewählten Elements aus dem Array:

Vorlage

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

Skript

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

Es ist noch lustiger, wenn Sie es mit Eingaben machen, weil sie gebunden sein sollten. Wenn Sie daran interessiert sind, wie dies in Vue2 mit Optionen zum Einfügen und Löschen gemacht wird, sehen Sie sich bitte ein Beispiel an:

Bitte schauen Sie sich die Geige an

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>

Sie können das Element über die ID löschen

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

In Ihrem JS-Code

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

Vue umschließt die Mutationsmethoden eines beobachteten Arrays, sodass sie auch Ansichtsaktualisierungen auslösen. Klicken Sie hier für weitere Details.

Sie könnten denken, dies würde dazu führen, dass Vue das vorhandene DOM wegwirft und die gesamte Liste neu rendert - zum Glück ist dies nicht der Fall.

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

Und für Ihren JS:

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

Spleißen ist am besten, um Elemente aus einem bestimmten Index zu entfernen. Das angegebene Beispiel wird auf der Konsole getestet.

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

startIndex beginnt bei 0.

Warum nicht einfach die Methode weglassen wie:

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