How to remove an item from an array in Vue.js

by

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);
}

More Related Contents:

  1. Vue.js dynamic images not working
  2. How to add external JS scripts to VueJS Components?
  3. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  4. Communication between sibling components in Vue.js 2.0
  5. VueJS: why is “this” undefined?
  6. Vuex state on page refresh
  7. Vuejs and Vue.set(), update array
  8. [Vue warn]: Property or method is not defined on the instance but referenced during render
  9. How to watch store values from vuex?
  10. NavigationDuplicated Navigating to current location (“/search”) is not allowed
  11. How to call function on child component on parent events
  12. How to listen for ‘props’ changes
  13. Accessing Vuex state when defining Vue-Router routes
  14. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  15. Vuejs typescript this.$refs..value does not exist
  16. How to install jQuery into Nuxt.js?
  17. Vue.js: Conditional class style binding
  18. Is there any way to ‘watch’ for localstorage in Vuejs?
  19. how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route
  20. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  21. Vue v-on:click does not work on component
  22. Methods vs Computed in Vue
  23. Passing props with programmatic navigation Vue.js
  24. How to set a component non-reactive data in Vue 2?
  25. How to use Vuetify tabs with vue-router
  26. Force download GET request using axios
  27. Importing javascript file for use within vue component
  28. How to limit iteration of elements in `v-for`
  29. Detect Back Button in Navigation Guards of Vue-Router
  30. What’s the correct way to pass props as initial data in Vue.js 2?

Leave a Comment