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?
The $delete method will trigger Vue's reactivity to update the this. users object to remove the foo property. We just replace this. $delete with Vue.
To remove an item from a given array by value, you need to get the index of that value by using the indexOf() function and then use the splice() function to remove the value from the array using its index.
You're using splice
in a wrong way.
The overloads are:
array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, itemForInsertAfterDeletion1, itemForInsertAfterDeletion2, ...)
Start means the index that you want to start, not the element you want to remove. And you should pass the second parameter deleteCount
as 1, which means: "I want to delete 1 element starting at the index {start}".
So you better go with:
deleteEvent: function(event) { this.events.splice(this.events.indexOf(event), 1); }
Also, you're using a parameter, so you access it directly, not with this.event
.
But in this way you will look up unnecessary for the indexOf
in every delete, for solving this you can define the index
variable at your v-for
, and then pass it instead of the event object.
That is:
v-for="(event, index) in events" ... <button ... @click="deleteEvent(index)"
And:
deleteEvent: function(index) { this.events.splice(index, 1); }
You can also use .$delete:
remove (index) { this.$delete(this.finds, index) }
sources:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With