南城丶丶 2020-04-20 13:53 采纳率: 0%
浏览 2288

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) // 这里能正常输出值
    },
  • 写回答

3条回答 默认 最新

  • Camila__ 2020-11-24 15:27
    关注

    这个问题解决了吗?

    评论

报告相同问题?

悬赏问题

  • ¥15 matlab有关常微分方程的问题求解决
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab,jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字?
  • ¥100 求三轴之间相互配合画圆以及直线的算法
  • ¥100 c语言,请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable