首页 > 其他 > 详细

VUE开发中,数据变化后,修改了绑定对象的属性值后,页面dom没有发生变化,两种方法可以重新渲染$set和$forceUpdate

时间:2020-04-17 11:19:27      阅读:307      评论:0      收藏:0      [点我收藏+]

最近在开发中遇到一个在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

技术分享图片

 

VUE开发中,数据变化后,修改了绑定对象的属性值后,页面dom没有发生变化,两种方法可以重新渲染$set和$forceUpdate

原文:https://www.cnblogs.com/bobo1/p/12718112.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!