web-dev-qa-db-ja.com

v-modelはinput type = "file"をサポートしていません

ファイル入力でv-modelを使用することはできません、Vueはv-on:changeを使用する必要があると言います。Okなので、v-on:changeが、入力ファイルの「コンテンツ」をdataプロパティにバインドするにはどうすればよいですか？

コンポーネントで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 -->

バインディングはどのようにすればよいですか？

javascriptvue.jsvuejs2
10
rap-2-h

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/ を参照してください

18
Arun Ghosh

ファイル入力でv-modelを使用することは意味がありません。ファイル入力に値を設定できないためです-双方向バインディングはここで何をすべきでしょうか？

v-on:changeを使用するだけです

7
Linus Borg