[英]v-model on input type files vue.js
How to take data from v-model array in input type="file" multiple ? 如何从输入type =“ file” multiple中的v-model数组中获取数据?
<input type="file" multiple v-model="modFiles[index]">
<input type="file" multiple v-model="modFiles[index]">
<input type="file" multiple v-model="modFiles[index]">
I'm using v-for loop and I can get the first data from each modFiles[]. 我正在使用v-for循环,我可以从每个modFiles []中获取第一个数据。
this.modFiles[0] //take the first from multiple file
But it's only the first data. 但这只是第一批数据。 How can I take all the data inside modFiles[0],modFiles[1],modFiles[3] ?
如何获取modFiles [0],modFiles [1],modFiles [3]中的所有数据? And how to count the data inside each modFiles ?
以及如何计算每个modFiles内部的数据?
this.modFiles[0].length //i get error here
thanks so much 非常感谢
Bidirectional binding is not supported for <input type="file">
, since you're not allowed to set value on such inputs (value is only set after user chooses a file). <input type="file">
不支持双向绑定,因为不允许在此类输入上设置值(仅在用户选择文件后才设置值)。
Use @change
event instead: 使用
@change
事件:
<input type="file" multiple @change="handleFileChange($event, index)">
methods: {
handleFileChange(evt, index) {
// evt.target.files contains Array-like FileList object
}
}
Update: 更新:
In order to show/hide your submit button based on count of selected files, introduce new data property: 为了根据选定文件的数量显示/隐藏您的提交按钮,请引入新的data属性:
data: {
filesSelected: 0
},
methods: {
handleFileChange(evt, index) {
this.filesSelected = evt.target.files.length;
}
}
And then use it in your template: 然后在模板中使用它:
<input type="submit" v-show="filesSelected > 0" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.