Question

我有一个使用v-for填充的数组。还有一个按钮，单击后会使用splice()从数组中删除某些项目。但是，由于某种原因，它只会删除数组中的所有项目。

代码如下：

new Vue({
  el: '#app',
  data: {
    numbers: {
      list: [1, 2, 3],
      index: 0
    }
  },
  computed: {
    getNumbers() {
      let nums = this.numbers.list
      return nums.splice(this.numbers.index, this.numbers.list.length)
    }
  },
  methods: {
    sliceOut() {
      this.numbers.index = 1
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-for="number in getNumbers">
    {{ number }}
  </div>
  <button @click="sliceOut()">Slice</button>
</div>

如您所见，它没有删除[2, 3]，而是删除了所有项目。请帮我解决这个问题！

Answer 1

splice返回删除的元素。因此，最初在计算计算的属性getNumbers时，您将删除所有元素，并返回删除的元素，并因此显示在使用v-for呈现的列表中。

splice也对数组进行了更改，因此列表现在为空。

现在，在进一步的计算中，getNumbers属性将不返回任何内容，因为数组为空。

我猜你应该在这里使用slice而不是splice，它不会改变数组。

new Vue({
  el: '#app',
  data: {
    numbers: {
      list: [1, 2, 3],
      index: 0
    }
  },
  computed: {
    getNumbers() {
      let nums = this.numbers.list
      return nums.slice(this.numbers.index, this.numbers.list.length)
    }
  },
  methods: {
    sliceOut() {
      this.numbers.index = 1
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-for="number in getNumbers">
    {{ number }}
  </div>
  <button @click="sliceOut()">Slice</button>
</div>

Answer 2

如果要删除特定索引，请写

nums.splice(this.numbers.index,1)

splice函数的第二个参数告诉您需要删除多少个元素。

VueJS拼接从数组中删除所有项目

2 个答案: