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

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>