vue v-model值发生变化,控件不刷新的问题

最近用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) // 这里能正常输出值
    },
查看全部
h_jianghai
南城丶丶
2020/04/20 13:53
  • vue.js
  • 点赞
  • 收藏
  • 回答
    私信

2个回复