VUEJS从列表中删除元素？

Question

可以从列表中删除特定元素.我试过这个函数删除元素

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

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

remove(index)=未定义的函数

unshift(index)=添加new和empty元素

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>

Answer 1

$remove在Vue.js 2.0中已弃用,并替换splice为文档中所述.确保splice为其添加第二个参数.

从Vue 1.x迁移 - 2.0

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

Answer 2

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

Vue.delete(this.items, index);

Answer 3

该$.remove功能已被替换$.delete.

你可以像这样调用它:

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

它的工作原理Object和Array.对于对象,您需要使用键控对象.使用数组,您可以传入要删除的项目的索引.

这是一个小提琴的例子:https://jsfiddle.net/james2doyle/386w72nn/

编辑

我还为数组添加了一个示例

Answer 4

$ delete可以在@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