VUEJS从列表中删除元素？

A米亚2020-03-11

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

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

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

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>

小胖LEY西门2020/03/11 18:00:42

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

Vue.delete(this.items, index);

GilTom2020/03/11 18:00:42

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

您可以这样称呼它：

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

在Object和上也能正常工作Array。对于对象，您需要使用键控对象。使用数组时，您传入要删除的项目的索引。

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

编辑

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

路在何方2020/03/11 18:00:42

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

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

https://jsfiddle.net/790og9w6/

Tom乐小小2020/03/11 18:00:42

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

从Vue 1.x-2.0迁移

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

JinJin乐2020/03/11 18:00:42

$ 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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer