Vue解决双向绑定失效,数据没有渲染的问题

378 阅读1分钟

代码块

handleUploadSuccess(response, file, fileList) {
    if (response.code === 200) {
        this.form.backgroundImage = this.getProxyImgUrl(
            response.uploadMappingPath
        );
        this.$forceUpdate();
    } else {
        this.$message.error(response.message);
    }
} 

业务场景

使用el-dialog打开了表单,表单中使用el-upload,当图片上传成功之后,通过回调函数来改变数据,实现页面的重新渲染,但是并没有成功

<el-form-item label="背景图" prop="backgroundImage">
          <el-upload
            class="avatar-uploader"
            ref="upload"
            :action="uploadAction"
            :show-file-list="false"
            :headers="uploadHeaders"
            list-type="picture"
            :on-success="handleUploadSuccess"
          >
            <img
              v-if="form.backgroundImage"
              :src="form.backgroundImage"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
</el-form-item>

解决方法

// 数据改变之后调用,会强迫Vue实例重新渲染
this.$forceUpdate();

Vue官网说明

image.png