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

Posted 2023-02-16

【中文标题】如何从 Vue.js 中的数组中删除一个项目

【英文标题】：How to remove an item from an array in Vue.js

【发布时间】：2017-08-20 03:45:01

【问题描述】：

我是 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 事件从数组中删除数据的最佳方式是什么？

【问题讨论】：

这能回答你的问题吗？ How to remove specific item from array?

【参考方案1】：

您以错误的方式使用splice。

重载是：

array.splice(开始)

array.splice(start, 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，为了解决此问题，您可以在 v-for 处定义 index 变量，然后将其传递给事件对象。

即：

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

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

还有：

deleteEvent: function(index) 
  this.events.splice(index, 1);

【讨论】：

太棒了，我已经以为我用错了拼接。你能告诉我拼接和切片有什么区别吗？谢谢！

当然。基本上，sPlice 修改了原始数组，而 slice 创建了一个新数组。更多信息：tothenew.com/blog/javascript-splice-vs-slice

您也可以使用 $remove 作为简写。

@EdmundoRodrigues，感谢这个'您可以在v-for 处定义索引变量' :) 我喜欢这样的宝石。

@ Edmundo Rodrigues 谢谢。真的很好。我只是用索引而不是对象的索引来删除。非常感谢

【参考方案2】：

你也可以使用 .$delete:

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

来源：

https://vuejs.org/v2/api/#Vue-delete https://medium.com/vuejs-tips/tip-3-deleting-array-index-in-vue-js-8cc31d7214bf

【讨论】：

这是正确的方式，因为让 Vue 知道新闻。

为什么在文档中说“你应该很少需要使用它”，这是好的做法吗？

@Notflip：通常你会替换整个数组。

这个解决方案对我有用，而 slice(index, 1) 什么也没做。

@Roberto slice 和 splice 不同:)

【参考方案3】：

不要忘记绑定 key 属性否则总是 last 项目将被删除

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

模板

<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

【讨论】：

这确实应该是选择的答案。我想知道为什么这两个选项（splice 或 $delete）都不起作用，结果我只是没有正确的密钥集。

好吧，它确实被删除了，但只是在绑定尚未到位时开始做一些奇怪的事情。

我花了 4 个小时想知道为什么最后一个元素总是被删除。谢谢你！

我们注意到你不能使用循环索引作为 :key 值。例如。 <div v-for="(item, index) in items" :key="index"> 没用。

@HendrikPilz 我在 key 中使用了 item.id

【参考方案4】：

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

请查看js fiddle

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>

【参考方案5】：

可以通过id删除项目

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

在你的 JS 代码中

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

Vue 包装了观察到的数组的变异方法，因此它们也会触发视图更新。 Click here 了解更多详情。

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

【参考方案6】：

<v-btn color="info" @click="eliminarTarea(item.id)">Eliminar</v-btn>

对于你的 JS：

this.listaTareas = this.listaTareas.filter(i=>i.id != id)

【讨论】：

你的答案和别人差不多，并不比别人好。所以不值得发这个。

@foxiris 不要阻止用户发布他们的答案。如果您认为此解决方案没有帮助，请放弃。

【参考方案7】：

为什么不把方法全部省略，比如：

v-for="(event, index) in events"
...
<button ... @click="$delete(events, index)">

【参考方案8】：

Splice 是从特定索引中删除元素的最佳方法。给定的 示例在控制台上进行了测试。

card = [1, 2, 3, 4];
card.splice(1,1);  // [2]
card   // (3) [1, 3, 4]
splice(startingIndex, totalNumberOfElements)

startingIndex 从 0 开始。