How to remove an item from an array in Vue js

Question

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       lt div class  list-group  gt            lt div class  list-group-item  v-for  event in events  gt               lt h4 class  list-group-item-heading  gt                     event name                 lt  h4 gt                lt h5 gt                     event date                 lt  h5 gt                lt p class  list-group-item-text  v-if  event description  gt    event description    lt  p gt                lt button class  btn btn-xs btn-danger   click  deleteEvent event   gt Delete lt  button gt           lt  div gt        lt  div gt   lt  div gt    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

User · Answer

You can also use   delete   remove  index     this  delete this finds  index      sources     https   vuejs org v2 api  Vue-delete  https   medium com vuejs-tips tip-3-deleting-array-index-in-vue-js-8cc31d7214bf

User · Answer

Why not just omit the method all together like  v-for  quot  event  index  in events quot       lt button      click  quot  delete events  index  quot  gt

User · Answer

Don t forget to bind key attribute otherwise always last item will be deleted  Correct way to delete selected item from array   Template   lt div v-for   item  index  in items   key  item id  gt     lt input v-model  item value  gt      lt button  click  deleteItem index   gt    delete  lt  button gt      script  deleteItem index      this items splice index  1     OR   this  delete this items index     both will do the same

User · Answer

You can delete item through id   lt button  click  deleteEvent event id   gt Delete lt  button gt    Inside your JS code  deleteEvent id     this events   this events filter  e   gt 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

User · Answer

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

User · Answer

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   quot I want to delete 1 element starting at the index  start  quot   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  quot  event  index  in events quot        lt button      click  quot deleteEvent index  quot   And  deleteEvent  function index      this events splice index  1

User · Answer

lt v-btn color  info   click  eliminarTarea item id   gt Eliminar lt  v-btn gt    And for your JS   this listaTareas   this listaTareas filter i  gt i id    id

User · Answer

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   x000D   x000D  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      x000D   lt script src  https   unpkg com vue 2 5 3 dist vue js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     lt h1 gt Finds lt  h1 gt  x000D     lt div v-for   find  index  in finds  gt  x000D       lt input v-model  find value  gt  x000D       lt button  click  deleteFind index   gt  x000D        delete x000D       lt  button gt  x000D     lt  div gt  x000D     x000D     lt button  click  addFind  gt  x000D      New Find x000D     lt  button gt  x000D     x000D     lt pre gt     data    lt  pre gt  x000D   lt  div gt  x000D   x000D   x000D

[javascript] How to remove an item from an array in Vue.js

Examples related to javascript

Examples related to vuejs2