Question

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

Answer 1

您以错误的方式使用splice。

重载是：

方法Array.splice（开始）

array.splice（start，deleteCount）

array.splice（start，deleteCount，itemForInsertAfterDeletion1，itemForInsertAfterDeletion2，...）

Start表示要启动的索引，而不是要删除的元素。你应该将第二个参数deleteCount传递为1，这意味着：＆＃34;我想从索引{start}＆＃34;开始删除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);
}

Answer 2

您还可以使用。$ delete：

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

来源：

Answer 3

当你使用输入时，它甚至更有趣，因为它们应该受到约束。如果您对如何在Vue2中使用插入和删除选项感兴趣，请参阅示例：

请查看js fiddle

＆＃13;

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);
    }
  }
});

＆＃13;

<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>

＆＃13;

Answer 4

别忘了绑定键属性，否则总是删除最后一个项目

从阵列中删除所选项目的正确方法：

模板

<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
}

Answer 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并重新呈现整个列表-幸运的是，情况并非如此。

Answer 6

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

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

startingIndex从0开始。

Answer 7

为什么不像这样一起省略所有方法：

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

Answer 8

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

对于您的JS：

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

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

8 个答案: