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) = not remove any element from lists

remove( index ) = undefined function

unshift( index ) = add new and empty element

splice( index ) = remove all element from index

please help me to remove specific element from lists.

below is my js code

var example2 = new Vue({   el: '#example-2',   data: {     items: [       { message: 'Foo' },       { message: 'Bar' },       { message: 'Bar1' },       { message: 'Bar2' },       { message: 'Bar3' },       { message: 'Bar4' }     ]   },   methods : {     removeElement : function(index){         this.items.$remove(index);     }   } }) 

below is my HTML code

<ul id="example-1">   <li v-for="(key, item) in items">     {{ item.message }}     <button v-on:click="removeElement(key)">remove</button>   </li> </ul> 

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