最近用vue来开发项目。在做表单的时候遇到了这个问题。表单采用v-model的方式绑定值,但是在上传图片成功后的回调函数里,对data进行赋值之后,界面上的input没有发生变化。
无意中修改其它input的值之后,这个值又出现了。那位帮帮忙,看看是什么问题。
表单
<el-form ref="form" :model="formData" lable-position="left" label-width="120px">
<el-form-item label="标题">
<el-input v-model="formData.title" />
</el-form-item>
<el-form-item label="文章链接">
<el-input v-model="formData.articleUrl" />
</el-form-item>
<el-form-item label="图片">
<el-input v-model="formData.articleImage" />
</el-form-item>
<el-form-item label="上传">
<el-upload
ref="upfile"
class="upload-demo"
action="http://10.108.6.101:8007/api/upload/uploadimg"
:limit="1"
:on-error="uploadError"
:on-success="handleAvatarSuccess"
enctype="multipart/form-data"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button @click="dialogVisible=false">取消</el-button>
</el-form-item>
</el-form>
回调函数:
handleAvatarSuccess(response, file, fileList) {
this.formData.articleImage = getImgUrl(response.data)
this.$set(this.formData, 'articleImage', getImgUrl(response.data)) // 尝试了百度到的方法,也不行
alert(this.formData.articleImage) // 这里能正常输出值
},