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