快捷導(dǎo)航

vue2?element-ui?el-checkbox視圖不更新問題及解決

更新時間：2024年12月26日 11:08:04 作者：木有名字就是最好的名字

作者在開發(fā)過程中遇到了視圖不更新的問題,最終通過改變一個無關(guān)緊要的響應(yīng)式數(shù)據(jù)來解決,讓視圖發(fā)生改變

vue2 element-ui el-checkbox視圖不更新

今天在開發(fā)過程發(fā)現(xiàn)一個問題，如標(biāo)題所描述的，我在更改了data(){return{}}里的數(shù)據(jù)后，也就是對 el-checkbox 的 v-model 綁定了一個 data() 里面的數(shù)據(jù)，與之對應(yīng)的視圖沒有發(fā)生變化

我之所以斷定我data() 里的數(shù)據(jù)發(fā)生了變化，而視圖沒有發(fā)生變化，是因為在chrome 的插件 vue devtools 中確認(rèn)了 data() 數(shù)據(jù)是發(fā)生了改變，也就證明el-checkbox 的v-model綁定的boolean 值發(fā)生了改變，此時視圖應(yīng)該按照 v-model="false" ==> v-model="true" 從未勾選狀態(tài)==>勾選狀態(tài) 但是頁面一直沒有更新。

在確認(rèn)自己不是因為低級錯誤而導(dǎo)致的視圖不更新后，對該問題進(jìn)行了不同的處理

1：百度：使用 $set() 、使用froceUpdate() 這兩者都不起作用

既然已經(jīng)明確了數(shù)據(jù)是發(fā)生了變化，依賴數(shù)據(jù)的視圖沒有發(fā)生改變，那么可以通過較為偏激的方法用v-if="true" / v-if="false" 的方法將組件銷毀再重新掛載，（此種方法過于偏激，而且相對另類不推薦使用）

既然有通過 v-if 的方法強(qiáng)行讓元素重新渲染，那么是否可以利用 vue 的一些特性進(jìn)行類似的操作呢？

我個人觀點(diǎn)

vue 響應(yīng)式可以通過數(shù)據(jù)驅(qū)動頁面的更新加上 diff算法，可以試著給 el-checkbox 組件一個無關(guān)緊要的屬性

例如：

data-xxx=“響應(yīng)式數(shù)據(jù)” 通過更改該響應(yīng)式數(shù)據(jù) 讓vue 在進(jìn)行diff算法中，發(fā)現(xiàn)虛擬Dom el-checkbox 的其中一個 data-xxx 屬性發(fā)生變化，從而讓其觸發(fā)該組件的渲染，以達(dá)到 v-model 綁定的值改變所對應(yīng)的視圖發(fā)生變化。

例子：

<el-checkbox v-model="list[index].obj[value].checked" :data-a="checked">

偽代碼：

function changeValue(){
// 將 list[index].obj[value].checked 為 false 改為 true

this.list[index].obj[value].checked = true // 此時視圖 并沒有因為 數(shù)據(jù)的變化 而 從 未勾選變成勾選狀態(tài)

// 更改一個 無關(guān)緊要的 數(shù)值
this.checked = !this.checked // 此處 無論checked 是什么 都不影響 目的是讓vue 去重新渲染 el-checkbox 這個組件

}