vue.js – VUEJS从列表中删除元素?

前端之家收集整理的这篇文章主要介绍了vue.js – VUEJS从列表中删除元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
可以从列表中删除特定的元素.我尝试这个功能删除元素

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

请帮助我删除列表中的特定元素.

下面是我的js代码

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

下面是我的HTML代码

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

解决方法

$remove在Vue.js 2.0中被弃用,并被文档中所示的拼接替换.确保添加拼接的第二个参数,使其工作.

Migration From Vue 1.x – 2.0

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

猜你在找的JavaScript相关文章