VUEJS 从列表中删除元素？

Question

可以从列表中删除特定元素。我尝试了删除元素的此功能

pop() = 移除最后一个元素

$remove(index) = 不从列表中删除任何元素

删除（索引）=未定义函数

unshift( index ) = 添加新的空元素

splice( index ) = 从索引中删除所有元素

请帮我从列表中删除特定元素。

下面是我的js代码

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

下面是我的 HTML 代码

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

原文由 Renish Khunt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

$remove 在 Vue.js 2.0 中已弃用，并由 splice 取代，如文档中所述。确保添加 splice 的第二个参数以使其正常工作。

从 Vue 1.x - 2.0 迁移

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

原文由 jonan.pineda 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你的 Vue 版本是 2.2.0+，你可以使用 Vue.delete

 Vue.delete(this.items, index);

原文由 Lukasz Wiktor 发布，翻译遵循 CC BY-SA 4.0 许可协议