我是在<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()