一つだけの場合はこのように書きました。
html
1<input type="file" v-on:change="onChange"> 2<img v-bind:src="image">
js
1data: { 2 image: "", 3}, 4methods: { 5 onChange: function(event) { 6 let file = event.target.files[0] 7 this.image = window.URL.createObjectURL(file); 8 }, 9}
v-forで画像を複数表示させ、
それぞれのファイル選択ボタンでそれぞれの画像及び、配列内の要素の値を変更できるようにしたい。
html
1<ul> 2 <li v-for="(image, index) in images"> 3 <input type="file" v-on:change="onChange(index)"> 4 <img v-bind:src="image"> 5 </li> 6</ul>
js
1data: { 2 images: ["画像A", "画像B", "画像C"], 3}, 4methods: { 5 onChange: 6 7 }, 8}
v-forのinput type buttonの場合は、引数にindexを入れて.splice()で
配列の要素を削除や変更できたのですが、input type fileの場合
どの用にどのように書けばいいかわかりませんでした。
何卒よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/08 03:04
2019/03/08 06:14 編集
2019/03/08 06:43 編集
2019/03/08 07:00
2019/03/08 07:05