Question

我有基本的v-for循环array：

<template v-for="(item, index) in array">
    {{item.text}}
    <btn @click="delete">Delete me!</btn>
</temaplate>

我希望能够删除循环中的项目。我该怎么做？我可以简单地使用splice（）或删除没有我要删除的元素的索引吗？

Answer 1

使用Array.splice()。

app = new Vue({
  el: "#app",
  data: {
    items: [{'text':'a'},{'text':'b'}]
  },
  methods: {
    deleteItem: function (item, index) {
      if(this.items[index] === item) { 
      // The template passes index as the second parameter to avoid indexOf, 
      // it will be better for the performance especially for one large array
      // (because indexOf actually loop the array to do the match)
        this.items.splice(index, 1)
      } else {
        let found = this.items.indexOf(item)
        this.items.splice(found, 1)
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <template v-for="(item, index) in items">
      {{item.text}}
      <button @click="deleteItem(item, index)">Delete me!</button>
  </template>
</div>

Answer 2

以防万一还有一些使用拼接的人，Vue已经有$ delete。

在您的模板中：

justTime
Out[61]: '09:46:46'

在您的方法中：

<template v-for="(item, index) in array" :key="item">
{{item.text}}
<btn @click="delete(index)">Delete me!</btn>

vuejs - 如何删除v-for项目中的数组项。元件？

2 个答案: