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,修改了數組里的對應數據。將上傳組件和數據關聯了起來!!!