I am new to vue.js (2) and I am currently working on a simple event app. I've managed to add events but now I would like to delete events based on clicking on a button.
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
});
I've tried to pass the event to the function and than delete that one with the slice function, I thought it was that code for deleting some data from the array. What is the best en cleanest way to delete data from the array with a simpleb button and onclick event?
This question is related to
javascript
vuejs2
Why not just omit the method all together like:
v-for="(event, index) in events"
...
<button ... @click="$delete(events, index)">
Don't forget to bind key attribute otherwise always last item will be deleted
Correct way to delete selected item from array:
Template
<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
}
<v-btn color="info" @click="eliminarTarea(item.id)">Eliminar</v-btn>
And for your JS:
this.listaTareas = this.listaTareas.filter(i=>i.id != id)
You can delete item through id
<button @click="deleteEvent(event.id)">Delete</button>
Inside your JS code
deleteEvent(id){
this.events = this.events.filter((e)=>e.id !== id )
}
Vue wraps an observed array’s mutation methods so they will also trigger view updates. Click here for more details.
You might think this will cause Vue to throw away the existing DOM and re-render the entire list - luckily, that is not the case.
Splice is the best to remove element from specific index. The given example is tested on console.
card = [1, 2, 3, 4];
card.splice(1,1); // [2]
card // (3) [1, 3, 4]
splice(startingIndex, totalNumberOfElements)
startingIndex start from 0.
It is even funnier when you are doing it with inputs, because they should be bound. If you are interested in how to do it in Vue2 with options to insert and delete, please see an example:
please have a look an js fiddle
new Vue({_x000D_
el: '#app',_x000D_
data: {_x000D_
finds: [] _x000D_
},_x000D_
methods: {_x000D_
addFind: function () {_x000D_
this.finds.push({ value: 'def' });_x000D_
},_x000D_
deleteFind: function (index) {_x000D_
console.log(index);_x000D_
console.log(this.finds);_x000D_
this.finds.splice(index, 1);_x000D_
}_x000D_
}_x000D_
});<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>_x000D_
<div id="app">_x000D_
<h1>Finds</h1>_x000D_
<div v-for="(find, index) in finds">_x000D_
<input v-model="find.value">_x000D_
<button @click="deleteFind(index)">_x000D_
delete_x000D_
</button>_x000D_
</div>_x000D_
_x000D_
<button @click="addFind">_x000D_
New Find_x000D_
</button>_x000D_
_x000D_
<pre>{{ $data }}</pre>_x000D_
</div>You can also use .$delete:
remove (index) {
this.$delete(this.finds, index)
}
sources:
Source: Stackoverflow.com