时间戳

首页 > 解决方案 > 删除索引时的Vue反应性问题

arrays - 删除索引时的Vue反应性问题

问题描述

我有一个带有 3 个按钮的小 vue 应用程序

<button @click="add(1)">1</button>
<button @click="add(2)">2</button>
<button @click="add(3)">3</button>

将数字添加到数组中

所以通常你可以得到

[1,2,3,1,3]

我将这些输出为列表

<div class="numbers" v-for="(number, index) in numbers">
  <span @click="removeNumber(index)">{{ number }}</span>
</div>

但是我的删除号码方法可以做到这一点

removeNumber(index) {

  Vue.delete(this.numbers, index ); // I have also used splice here

},

数据（数字）显示了正确的结果，但是 UI 总是删除最后一项而不是我想要的。

所以如果我有

numbers = [1,2,3]

我试图删除数字 2。数据是正确的，但 UI 总是只删除数字 3。

我怀疑这是一个反应性问题，但无法解决。我还尝试将 Vue.delete 包装在 nextTick()

标签： arraysvue.jsindexofvue-reactivity

解决方案

推荐阅读