VUE開發中，數據變化后，修改了綁定對象的屬性值后，頁面dom沒有發生變化，兩種方法可以重新渲染$set和$forceUpdate

最近在開發中遇到一個在form表單對象里，有個圖片上傳的組件，上傳成功后返回數據賦值后，圖片沒有展示出來

 

 當我上傳圖片成功后給form.imgUrl賦值后，頁面並沒有出現圖片的縮略圖

該怎么解決呢：

方法1.$set

// 上傳成功回調函數
handleAvatarSuccess(res, file) {
    this.$set(this.form,'imgUrl',res.data);
},

　　

方法2.$forceUpdate

handleAvatarSuccess(res, file) {
    this.form.imgUrl = res.data;
    this.$forceUpdate();
},

　

$set官方api

vm.$set( target, propertyName/index, value )
參數：

{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：設置的值。

用法：

這是全局 Vue.set 的別名。

　

$forceUpdate

迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件。

 

解決后成功渲染good