v-model on input type files vue.js
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).
Use @change
event instead:
<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: { 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" />