VUEJS remove Element From Lists?

Solution 1:

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

Solution 2:

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

Vue.delete(this.items, index);

Solution 3:

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

Solution 4:

$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