VUEJS 从列表中删除元素? [英] VUEJS remove Element From Lists?

问题描述

可以从列表中删除特定元素.我试过这个功能来删除元素

it is possible to remove specific element from lists. i tried this functions for remove element

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

pop() = remove last element

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

$remove(index) = not remove any element from lists

remove( index ) = 未定义函数

remove( index ) = undefined function

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

unshift( index ) = add new and empty element

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

splice( index ) = remove all element from index

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

please help me to remove specific element from lists.

下面是我的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 代码

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>

推荐答案

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

$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.

从 Vue 1.x - 2.0 迁移

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

这篇关于VUEJS 从列表中删除元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！