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

88

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?

Giesburts
quelle
Beantwortet das deine Frage? Wie entferne ich ein bestimmtes Element aus dem Array?
Ponury-Kostek

Antworten:

147

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);
}
Edmundo Rodrigues
quelle
Genial, ich dachte schon, dass ich Spleiß falsch verwendet habe. Können Sie mir sagen, was der Unterschied zwischen Spleiß und Scheibe ist? Vielen Dank!
Giesburts
1
Sicher. Grundsätzlich ändert sPlice das ursprüngliche Array, während Slice ein neues Array erstellt. Weitere Infos hier: tothenew.com/blog/javascript-splice-vs-slice
Edmundo Rodrigues
Sie können $ remove auch als Abkürzung verwenden.
Chris Dixon
2
@EdmundoRodrigues, danke für dieses ' Sie können diev-for Indexvariable an Ihrem definieren ' :) Ich liebe SO wegen solcher Edelsteine.
Valentine Shi
@ Edmundo Rodrigues Danke. Es war sehr nett. Ich habe nur den Index des Objekts mit dem Index gelöscht.
Vielen
62

Sie können auch verwenden. $ Delete:

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

Quellen:

Katinka Hesselink
quelle
4
Dies ist der richtige Weg, da der Vue über die Neuigkeiten informiert wird.
Insign
1
Warum steht in der Dokumentation "Sie sollten es selten brauchen", ist es eine gute Praxis?
Miguel Stevens
@Notflip: Normalerweise ersetzen Sie nur das Array als Ganzes.
Katinka Hesselink
1
Warum ist dies nicht die akzeptierte Antwort, wenn array.splice in vue nicht funktioniert? @ Gijsberts
yellowsir
1
@ Roberto Slice und Splice sind unterschiedlich :)
Evil Pigeon
26

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
}
Afraz Ahmad
quelle
Dies sollte wirklich die ausgewählte Antwort sein. Ich habe mich gefragt, warum keine der Optionen (Spleißen oder $ Löschen) funktioniert, und es stellte sich heraus, dass ich einfach keinen richtigen Schlüsselsatz hatte.
Lunyx
Nun, es wurde definitiv gelöscht, etwas, aber es hat gerade angefangen, seltsame Dinge zu tun, als die Bindung noch nicht vorhanden war.
DZet
1
Ich habe mich 4 Stunden lang gefragt, warum das letzte Element immer gelöscht wurde. Danke dafür!
Carol-Theodor Pelu
6

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/[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>

Jewgenij Afanasjew
quelle
Das ist hilfreich, aber können Sie mir dabei helfen? Ich blieb bei der Verwendung der Komponente stecken. Codepen.io/wall-e/pen/dQrmpE?editors=1010
w411 3.
3

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.

Masum Billah
quelle
1
<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)
Claudio Scheuermann
quelle
1
Ihre Antwort ist fast dieselbe wie die anderer und nicht besser als andere. Es lohnt sich also nicht, dies zu posten.
Foxiris
0

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.

Kaushik Shrimali
quelle
0

Warum nicht einfach die Methode weglassen wie:

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