vue3 reactive包裹数组无法页面无法响应式

前端小怪兽zmy2024-04-08 19:29

原代码如下：

javascript 复制代码

<div class="section" v-for="(item, i) in historyAccount" :key="i" v-show="item.flag">
   <span v-html="changeColor(item)"></span>
   <img src="@/assets/images/login/clearUserName3x.svg" @click="removeItem(item)" />
 </div>
//历史登录账号数据
let historyAccount = reactive([
  {
    phone: '18896722354',
    flag: false
  },
  {
    phone: '15056678907',
    flag: false
  }
])

//这里用filter方法删除所循环的historyAccount的值
function removeItem(item) {
  console.log(item)
  historyAccount = historyAccount.filter(ele => ele.phone !== item.phone)
  console.log(historyAccount)
}

此时removeItem方法运行，打印出historyAccount的值确实被改变了，但是页面还是没有变化

原因：

如果你直接通过赋值的方式改变reactive对象引用的数组，是不会触发视图的更新的，应该使用 Vue 提供的响应式方法来更新响应式数据。

改进：可以利用splice方法删除数组

javascript 复制代码

function removeItem(item) {
  const index = historyAccount.findIndex(ele => ele.phone == item.phone)
  if (index !== -1) {
    historyAccount.splice(index, 1)
  }
  console.log(historyAccount)
}