element ui 在Dialog对话框中使用 el-upload 上传图片后不回显的问题

博主在el-dialog对话框中使用el-form表单上传图片,上传成功后imgUrl重置却无法回显。猜测是对话框不能根据数据刷新节点,通过在回调方法中关闭再开启对话框解决了回显问题,后续同伴还给出了另一种代码解决方式。

我是在<el-dialog> 对话框中使用表单<el-form>提交数据,在上传图片时,使用<el-upload>标签上传,此时问题来了,我明明在上传成功回调方法中已经将imgUrl重置了啊,但是并没有回显出来。

<!--上传图片-->
<el-upload
            :headers="headers"
            :action="uploadPath"
            :show-file-list="false"
            :on-success="uploadSuccessHandle"
            :before-upload="onBeforeUpload"
            class="avatar-uploader"
            accept=".jpg, .jpeg, .png, .gif"
          >
            <img v-if="dataForm.imgUrl" :src="dataForm.imgUrl" class="avatar" >
            <i v-else class="el-icon-plus avatar-uploader-icon" />
 </el-upload>


//上传图片成功后回调的方法
uploadSuccessHandle(e) {
      this.dataForm.imgUrl = e.url
    }

我思考了会,猜测是在<el-dialog>中,已经弹出显示的对话框不能根据数据刷新节点。于是我抖机灵的在回调方法中,将对话框关掉再开启,就成功将其回显出来了,并且在前端显示时并没有看出它关过。

uploadSuccessHandle(e) {
      this.dataForm.imgUrl = e.url
      this.dialogFormVisible = false
      this.dialogFormVisible = true
    }

2020.4.7编辑:

我同伴告诉我只需要加上下面那串代码就可以了,........;

this.$forceUpdate()

 

评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值