VUEJS从列表中删除元素？

vue.js Vue.js

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>

第796篇《VUEJS从列表中删除元素？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
小胖LEY西门 2020.03.11

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

Vue.delete(this.items, index);
GilTom 2020.03.11

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

您可以这样称呼它：

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

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

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

编辑

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

路在何方 2020.03.11

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

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

https://jsfiddle.net/790og9w6/

Tom乐小小 2020.03.11

$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

$ 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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android