溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
數(shù)據(jù)通過異步操作后，對之前剛加載的數(shù)據(jù)進(jìn)行變更后，發(fā)現(xiàn)數(shù)據(jù)不能生效
方案一
當(dāng)數(shù)據(jù)變更后,通過watch 監(jiān)聽，先去銷毀當(dāng)前的組件，然后再重現(xiàn)渲染。使用 v-if 可以解決這個(gè)問題
<template>
<third-comp v-if="reFresh"/>
</template>
<script>
export default{
data(){
return {
reFresh:true,
menuTree:[]
}
},
watch:{
menuTree(){
this.reFresh= false
this.$nextTick(()=>{
this.reFresh = true
})
}
}
}
</script>
這種方式雖然可以實(shí)現(xiàn)，太不優(yōu)雅
方案二
通過vue key 實(shí)現(xiàn)，原理官方文檔。所以當(dāng)key 值變更時(shí)，會自動的重新渲染。
<template>
<third-comp :key="menuKey"/>
</template>
<script>
export default{
data(){
return {
menuKey:1
}
},
watch:{
menuTree(){
++this.menuKey
}
}
}
</script>
以上這篇vue 強(qiáng)制組件重新渲染(重置)的兩種方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼