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?
javascript
vuejs2
Giesburts
quelle
quelle
Antworten:
Sie verwenden
splice
falsch.Die Überlastungen sind:
Start bedeutet den Index, den Sie starten möchten, nicht das Element, das Sie entfernen möchten. Und Sie sollten den zweiten Parameter
deleteCount
als 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
indexOf
bei jedem Löschvorgang unnötig nachschlagen. Um dies zu lösen, können Sie dieindex
Variable an Ihrem definierenv-for
und 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); }
quelle
v-for
Indexvariable an Ihrem definieren ' :) Ich liebe SO wegen solcher Edelsteine.Sie können auch verwenden. $ Delete:
remove (index) { this.$delete(this.finds, index) }
Quellen:
quelle
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 }
quelle
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>
quelle
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.
quelle
<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)
quelle
card = [1, 2, 3, 4]; card.splice(1,1); // [2] card // (3) [1, 3, 4] splice(startingIndex, totalNumberOfElements)
quelle
Warum nicht einfach die Methode weglassen wie:
v-for="(event, index) in events" ... <button ... @click="$delete(events, index)">
quelle