zhoudawei

v-model只是一种语法糖,底层的方法还是去监听input事件。所以可以使用dispatchEvent事件给元素分配一个input事件,这样可以手动触发 inputElement 的 input 事件,同时可以触发 v-model 机制。IE 好像不支持(但可以 polyfill)。

el.value(newval)

el.dispatchEvent(new Event(\'input\'));

el为input元素

解决!

注意:

如果v-model有lazy修饰符的时候,触发得是change事件

el.dispatchEvent(new Event(\'change\'));

 

小例子:

<el-col :span="12" v-for="(subitem,index) in item" :key="\'content\'+index">
  <div v-else>
    <div @click="uploadPreFun(subitem.field_name)">
      <input v-show="false" type="text" :id="subitem.field_name" v-model="subitem.field_value">
      <span class="down-icon" v-show="subitem.field_value!=\'\'" @click="downFile(subitem.field_value)">下载</span>
        <el-upload
          class="upload-container"
          drag
          action="/api/vat/api/upload_file/"
          accept=".txt,.xls,.xlsx,.csv"
          multiple
           :on-success="filesUploadSuccess"
          :headers="{\'X-CSRFToken\': csrftoken}"
          :limit="1">
            <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
            <img src="../image/已上传.png" alt="">
        </el-upload>
    </div>
  </div>
</el-col>
 
uploadPreFun(refname) {
  this.refname = refname;
},
async filesUploadSuccess(response, file, fileList) {
  let el = document.getElementById(this.refname)
  el.value = response.data.file;
  el.dispatchEvent(new Event(\'input\'));
}
 
该方法将element上传组件成功后修改了input,触发了input中的v-model,修改了数组里的对应数据。将上传组件和数据关联了起来!!!

分类:

技术点:

相关文章:

  • 2021-11-27
  • 2021-05-03
  • 2021-12-01
  • 2021-09-14
  • 2021-12-02
  • 2021-10-23
  • 2021-12-12
  • 2021-10-28
猜你喜欢
  • 2021-10-18
  • 2021-10-18
  • 2021-10-18
  • 2021-12-10
  • 2021-10-29
  • 2020-04-07
  • 2021-11-09
相关资源
相似解决方案