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

我是在<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>中,已经弹出显示的对话框不能根据数据刷新节点。

需要加上以下代码

this.$forceUpdate()

例如:

uploadSuccessHandle(e) {
  this.$forceUpdate()
  this.dataForm.imgUrl = e.url
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。