問題如標(biāo)題所說,Vue中使用v-for遍歷對(duì)象數(shù)組,當(dāng)給數(shù)組其中某個(gè)元素對(duì)象重新賦值之后,頁面組件列表沒有及時(shí)更新渲染,而是在頁面進(jìn)行了其他的渲染操作以后列表才更新出來新的數(shù)據(jù),那同樣給對(duì)象內(nèi)的屬性值賦值也可能存在不渲染的情況,一并解決,尤其發(fā)生在網(wǎng)絡(luò)請(qǐng)求成功后的線程中操作數(shù)據(jù)
1、先說原理和問題原因:
Vue 的數(shù)據(jù)響應(yīng)式系統(tǒng)可以監(jiān)測(cè)到數(shù)組的變化,但是它不能檢測(cè)到數(shù)組某個(gè)索引位置的元素直接賦值的變化,這就導(dǎo)致你通過直接修改數(shù)組的第一項(xiàng)元素,而沒有觸發(fā)組件的重新渲染。同樣給對(duì)象內(nèi)的屬性值賦值也可能存在不渲染的情況,一并解決
2、再說解決方法:
為了解決這個(gè)問題,你可以使用 Vue 提供的 $set 方法或者 Vue.set 方法來改變數(shù)組的某個(gè)索引位置的元素。
例如,假設(shè)你的數(shù)組是 list,你要修改數(shù)組的第一項(xiàng)元素,你可以使用以下代碼:
this.$set(this.list, 0, newValue);
或者
Vue.set(this.list, 0, newValue);
其中,第一個(gè)參數(shù)是要修改的數(shù)組,第二個(gè)參數(shù)是要修改的索引位置,第三個(gè)參數(shù)是要設(shè)置的新的值。
同樣給對(duì)象內(nèi)的屬性值賦值也可能存在不渲染的情況,也用這個(gè)方法:
this.$set(this.currentRow, 'fileUrl', res.data.fileUrl);
在這個(gè)例子中,currentRow 是一個(gè)對(duì)象,我們使用 $set 方法將其 fileUrl 屬性更新為上傳成功后的 URL。這樣,即使 Vue 無法檢測(cè)到屬性的變化,也能夠觸發(fā)響應(yīng)式更新,重新渲染界面。
這樣,當(dāng)你使用 $set 或 Vue.set 方法來改變數(shù)組的某個(gè)索引位置的元素時(shí),Vue 就能夠檢測(cè)到數(shù)組的變化,從而觸發(fā)組件的重新渲染。
額外方案:
使用 $forceUpdate 方法強(qiáng)制更新組件:
如果你的更新操作比較復(fù)雜,或者使用了計(jì)算屬性等高級(jí)特性,可能會(huì)導(dǎo)致 Vue 無法正確地檢測(cè)到數(shù)據(jù)變化,從而無法自動(dòng)重新渲染界面。這時(shí)候可以使用 $forceUpdate 方法強(qiáng)制更新組件,例如:文章來源:http://www.zghlxwxcb.cn/news/detail-461740.html
this.$forceUpdate();
在這個(gè)例子中,我們使用 $forceUpdate 方法強(qiáng)制更新組件,這樣就能確保界面上的數(shù)據(jù)和組件實(shí)例的數(shù)據(jù)保持一致。文章來源地址http://www.zghlxwxcb.cn/news/detail-461740.html
到了這里,關(guān)于已解決:Vue改變數(shù)據(jù)后界面不自動(dòng)渲染,Vue中使用v-for遍歷對(duì)象數(shù)組,當(dāng)給其中某個(gè)元素對(duì)象重新賦值之后,頁面組件列表沒有渲染更新。的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!