Question

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

pop（）=删除最后一个元素

$ remove（index）=不从列表中删除任何元素

remove（index）= undefined function

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>

Answer 1

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

Migration From Vue 1.x - 2.0

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

Answer 2

如果你的Vue版本是2.2.0 +

，你可以使用Vue.delete

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

Answer 5

首先，您应该修复methods密钥。

然后，您应该将项目传递给$remove方法，而不是index。 [ref]

https://jsfiddle.net/790og9w6/

Answer 6

如果有人想知道：$delete 已在 VueJS 3 ( https://v3.vuejs.org/guide/migration/introduction.html#removed-apis ) 中删除。现在可以使用javascripts native splice(index, count of objects to be delete)。

VUEJS从列表中删除元素？

6 个答案: