如何从 Vue.js 中的数组中删除项目

IT技术 javascript vuejs2
2021-01-16 16:54:49

我是 vue.js (2) 的新手，目前正在开发一个简单的事件应用程序。我已经设法添加事件，但现在我想根据单击按钮删除事件。

HTML

    <div class="list-group">

        <div class="list-group-item" v-for="event in events">
            <h4 class="list-group-item-heading">
                {{ event.name }}
            </h4>

            <h5>
                {{ event.date }}
            </h5>

            <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>

            <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
        </div>

    </div>
</div>

JS(Vue)

new Vue ({
    el: '#app',

    data: {
        events: [
            {
                id: 1,
                name: 'Event 1',
                description: 'Just some lorem ipsum',
                date: '2015-09-10'
            },
            {
                id: 2,
                name: 'Event 2',
                description: 'Just another lorem ipsum',
                date: '2015-10-02'
            }
        ],

        event: { name: '', description: '', date: '' }
    },

    ready: function() {

    },

    methods: {

        deleteEvent: function(event) {
                this.events.splice(this.event);
        },

        // Adds an event to the existing events array
        addEvent: function() {
            if(this.event.name) {
                this.events.push(this.event);
                this.event = { name: '', description: '', date: '' };
            }
        }

    } // end of methods

});

我试图将事件传递给函数，而不是用 slice 函数删除那个事件，我认为这是从数组中删除一些数据的代码。使用 simpleb 按钮和 onclick 事件从数组中删除数据的最好的最干净的方法是什么？

6个回答

你用splice错了。

重载是：

array.splice(开始)

array.splice（开始，deleteCount）

array.splice(start, deleteCount, itemForInsertAfterDeletion1, itemForInsertAfterDeletion2, ...)

Start 表示您要开始的索引，而不是您要删除的元素。并且您应该将第二个参数传递deleteCount为 1，这意味着：“我想删除从索引 {start} 开始的 1 个元素”。

所以你最好去：

deleteEvent: function(event) {
  this.events.splice(this.events.indexOf(event), 1);
}

此外，您使用的是参数，因此您可以直接访问它，而不是使用 this.event.

但是通过这种方式，您将indexOf在每次删除时查找不必要的，为了解决这个问题，您可以index在您的 中定义变量v-for，然后传递它而不是事件对象。

那是：

v-for="(event, index) in events"
...

<button ... @click="deleteEvent(index)"

和：

deleteEvent: function(index) {
  this.events.splice(index, 1);
}
太棒了，我已经认为我使用了错误的拼接。你能告诉我拼接和切片有什么区别吗？谢谢！
2021-03-18 16:54:49
当然。基本上，sPlice 修改原始数组，而 slice 创建一个新数组。更多信息：tothenew.com/blog/javascript-splice-vs-slice
2021-03-24 16:54:49
您也可以使用 $remove 作为速记。
2021-03-27 16:54:49
@EdmundoRodrigues，感谢这个'你可以在你的v-for'中定义索引变量:)因为这样的宝石，我喜欢SO。
2021-04-13 16:54:49
@埃德蒙多罗德里格斯谢谢。真是太好了。我只是用索引而不是对象的索引删除。多谢
2021-04-14 16:54:49

你也可以使用 .$delete：

remove (index) {
 this.$delete(this.finds, index)
}

来源：

这个解决方案对我有用，而 slice(index, 1) 什么也没做。
2021-03-18 16:54:49
@Notflip：通常你只会替换整个数组。
2021-03-25 16:54:49
@Roberto slice 和 splice 是不同的 :)
2021-04-01 16:54:49
这是正确的方法，因为让 Vue 知道这个消息。
2021-04-10 16:54:49
为什么它在文档中说“你应该很少需要使用它”，这是一个好习惯吗？
2021-04-13 16:54:49

不要忘记绑定键属性否则总是最后一项将被删除

从数组中删除所选项目的正确方法：

模板

<div v-for="(item, index) in items" :key="item.id">
  <input v-model="item.value">
   <button @click="deleteItem(index)">
  delete
</button>

脚本

deleteItem(index) {
  this.items.splice(index, 1); \\OR   this.$delete(this.items,index)
 \\both will do the same
}
好吧，它肯定删除了，但在绑定尚未到位时就开始做一些奇怪的事情。
2021-03-17 16:54:49
我花了 4 个小时想知道为什么最后一个元素总是被删除。这次真是万分感谢！
2021-03-19 16:54:49
这真的应该是选定的答案。我想知道为什么这两个选项（splice 或 $delete）都不起作用，结果我只是没有正确的键集。
2021-03-26 16:54:49
@HendrikPilz 我在 key 中使用了 item.id
2021-04-08 16:54:49
我们注意到您不能将循环索引用作 :key 值。例如<div v-for="(item, index) in items" :key="index">没有工作。
2021-04-09 16:54:49

当你用输入来做这件事时会更有趣，因为它们应该被绑定。如果您对如何在 Vue2 中使用插入和删除选项进行操作感兴趣，请查看示例：

请看看一个js小提琴

new Vue({
  el: '#app',
  data: {
    finds: [] 
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: 'def' });
    },
    deleteFind: function (index) {
      console.log(index);
      console.log(this.finds);
      this.finds.splice(index, 1);
    }
  }
});
<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
<div id="app">
  <h1>Finds</h1>
  <div v-for="(find, index) in finds">
    <input v-model="find.value">
    <button @click="deleteFind(index)">
      delete
    </button>
  </div>
  
  <button @click="addFind">
    New Find
  </button>
  
  <pre>{{ $data }}</pre>
</div>

您可以通过 id 删除项目

<button @click="deleteEvent(event.id)">Delete</button>

在你的 JS 代码中

deleteEvent(id){
  this.events = this.events.filter((e)=>e.id !== id )
}

Vue 包装了观察到的数组的变异方法，因此它们也会触发视图更新。单击此处了解更多详细信息。

你可能认为这会导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，事实并非如此。

其它你可能感兴趣的问题
上一篇使用 JQuery 定时器调用 js 函数 下一篇使用 Fetch API 读取响应头