v-model on input type files vue.js v-model on input type files vue.js vue.js vue.js

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" />