Js修改input值后怎么同步修改绑定的v-model值

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，修改了数组里的对应数据。将上传组件和数据关联了起来！！！