2017-01-23 49 views
3

我不能使用v-model与文件输入,Vue说我必须使用v-on:change。好的,我可以使用v-on:change,但是如何将输入文件的“内容”绑定到data属性?v模型不支持输入类型=“文件”

比方说,我想它在一个组件绑定到this.file

export default { 
    data() { 
    file: null 
    }, 
    // ... 
} 

下面是HTML部分:

<input id="image" v-on:change="???" type="file"> 
<!--       ^- don't know how to bind without v-model --> 

应该怎么办的结合?

回答

4

onchange情况下,你应该传递事件对象的功能和处理:

onFileChange(e) { 
    var files = e.target.files || e.dataTransfer.files; 
    if (!files.length) 
    return; 
    this.createImage(files[0]); 
}, 

欲了解更多信息,请参阅https://codepen.io/Atinux/pen/qOvawK/

3

使用v-model与文件输入没有任何意义,因为您不能在文件输入上设置值 - 那么双向绑定在这里应该做什么?

只需使用v-on:change

+0

https://开头论坛归档。 vuejs.org/topic/3673/error-using-v-model-on-an-input-type-file/2 – cstruter