原代碼如下：
<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>
//歷史登錄賬號(hào)數(shù)據(jù)
let historyAccount = reactive([
{
phone: '18896722354',
flag: false
},
{
phone: '15056678907',
flag: false
}
])
//這里用filter方法刪除所循環(huán)的historyAccount的值
function removeItem(item) {
console.log(item)
historyAccount = historyAccount.filter(ele => ele.phone !== item.phone)
console.log(historyAccount)
}此時(shí)removeItem方法運(yùn)行，打印出historyAccount的值確實(shí)被改變了，但是頁(yè)面還是沒(méi)有變化
原因：
如果你直接通過(guò)賦值的方式改變
reactive對(duì)象引用的數(shù)組，是不會(huì)觸發(fā)視圖的更新的，應(yīng)該使用 Vue 提供的響應(yīng)式方法來(lái)更新響應(yīng)式數(shù)據(jù)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-845694.html
?改進(jìn)：可以利用splice方法刪除數(shù)組文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-845694.html
function removeItem(item) {
const index = historyAccount.findIndex(ele => ele.phone == item.phone)
if (index !== -1) {
historyAccount.splice(index, 1)
}
console.log(historyAccount)
}到了這里，關(guān)于vue3 reactive包裹數(shù)組無(wú)法頁(yè)面無(wú)法響應(yīng)式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
