I can not use v-model with file input, Vue says I must use v-on:change. Ok so I can use v-on:change, but how can I bind the "content" of the input file to a data property?
Let's say I want to bind it in a component to this.file:
export default {
data() {
file: null
},
// ...
}
Here is the HTML part:
<input id="image" v-on:change="???" type="file">
<!-- ^- don't know how to bind without v-model -->
How should I do the binding?
In the onchange event you should pass the event object to a function and handle:
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
For more information refer https://codepen.io/Atinux/pen/qOvawK/
this.createImage(files[0]); is a different method which is not included in the sinppet above, but the codepen link has it. I think it would be better if you could add that here as well, codepen link might expire, but the answer would remain.
Using v-model with a file input makes no sense, because you can't set a value on a file input - so what should a two-way binding do here?
Just use v-on:change
