2017-01-23 11 views
3

ファイル入力時にv-modelを使用できません.Vueはv-on:changeを使用する必要があります。 [OK]を私はv-on:changeを使用することができますが、dataプロパティに入力ファイルの "コンテンツ"をバインドする方法はありますか?v-modelは入力タイプ= "ファイル"をサポートしていません

のは、私が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

を使用://フォーラム - アーカイブ:詳細については

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を使用すると、ファイル入力に値を設定できないため意味がありません。そこで、双方向バインディングはどうすればよいでしょうか?

ちょうどあなたが関数にイベントオブジェクトを渡して処理する必要がありonchangeイベントでv-on:change

+0

HTTPSを参照してください。 vuejs.org/topic/3673/error-using-v-model-on-an-input-type-file/2 – cstruter

関連する問題