VUEJS remove Element From Lists?

Question

it is possible to remove specific element from lists. i tried this functions for remove element

pop() = remove last element

$remove(index) = n

Answer 1

You can use Vue.delete if your Vue version is 2.2.0+

Vue.delete(this.items, index);

Answer 2

Firstly, you should fix the methods key.

Then, you should pass the item to the $remove method, not the index. [ref]

https://jsfiddle.net/790og9w6/

Answer 3

$delete can use inline in @click:

<ul id="example">
   <li v-for="(item, key) in items">
       {{ item.message }}
       <button @click="$delete(items, key)">remove</button>
   </li>
</ul>

https://vuejs.org/v2/api/#vm-delete

Answer 4

The $.remove feature has been replaced with $.delete.

You can call it like so:

this.$delete(this.someItems, itemIndex).

It works on Object as well as Array. With objects, you need to use a keyed object. With arrays, you pass in the index of the item you want to delete.

Here is a fiddle example: https://jsfiddle.net/james2doyle/386w72nn/

EDIT

I added an example for an array as well

Answer 5

$remove is deprecated in Vue.js 2.0 and replaced by splice as stated in the docs. Make sure you add the 2nd parameter of splice for it to work.

Migration From Vue 1.x - 2.0

methods: {
  removeElement: function (index) {
    this.items.splice(index, 1);
  }
}