Vue.jsのv-forでinput fileで配列の要素の値を変更したい

一つだけの場合はこのように書きました。

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件

ベストアンサー

こんな感じですかね。

html
1<template>
2  <section>
3    <ul>
4        <li
5          v-for="(image, i) in images"
6          :key="i"
7        >
8          <input type="file" @change="onChange">
9          <img :src="image">
10        </li>
11    </ul>
12  </section>
13</template>
14
15<script>
16export default {
17  data() {
18    return {
19      images: ["画像A", "画像B", "画像C"]
20    }
21  },
22  methods: {
23    onChange(e) {
24      let file = e.target.files[0]
25      e.currentTarget.nextElementSibling.src = window.URL.createObjectURL(file);
26    }
27　}
28}

下記の感じですかねそしたら

html
1<template>
2  <section class="sample">
3    <ul>
4        <li
5          v-for="(image, i) in images"
6          :key="i"
7        >
8          <input
9            type="file"
10            @change="onChange($event, i)"
11          >
12          <img :src="image">
13        </li>
14    </ul>
15    {{ images }}
16  </section>
17</template>
18
19<script>
20export default {
21  name: 'sample',
22  data() {
23    return {
24      images: ["画像A", "画像B", "画像C"]
25    }
26  },
27  methods: {
28    onChange(e, i) {
29      let file = e.target.files[0]
30      if (file) this.$set(this.images, i, window.URL.createObjectURL(file))
31    }
32　}
33}
34</script>

投稿2019/03/08 01:38

編集2019/03/08 04:52

sauzar18

総合スコア163

tamuson

2019/03/08 03:04

ご回答ありがとうございます。こういった方法で画像表示させることも出来るのですね、大変勉強になりました！ありがとうございます。私の説明不足だった為、質問タイトルと説明文を修正させていただきました。大変申し訳ありません。画像を表示させるだけでなく、それぞれの配列内の要素の値も選択した画像データに変わるようにしたいと考えております。またよろしければ、ご教示の程お願いいたします。

tamuson

2019/03/08 06:14 編集

早速のご回答ありがとうございます！ Vue.js devtoolsで画像変更した配列の値を確認すると、 "blob:null/670404b3-633f-48e2-8eea-0c899d895a29"のように表示されてしまいました。うまく値を変更出来ていないのでしょうか。

sauzar18

2019/03/08 06:43 編集

nullと表示されるのはおそらく、サーバ環境下でないもしくは、ローカル環境でlocalhostとか経由しないで、ファイルをそのまま開いて実行してるからですかね。そもそもURL.createObjectURLはURLを得るもので、ディレクトリを参照するものではないのでnullになっているということです。 DataURLとBlobURLがあって、今回はBlobURLで、これはブラウザにアップされたファイルにアクセスするものです。それ以外の原因はちょっとわかりません。

tamuson

2019/03/08 07:00

丁寧なご説明ありがとうございます！ DataURLとBlobURLについても調べなおします！たいへん勉強になりました！本当にありがとうございます！

sauzar18

2019/03/08 07:05

いえいえ！

行動規範の内容に同意します

３つ固定でいいなら

html
1<!DOCTYPE html>
2<html>
3<head>
4  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5</head>
6<body>
7  <div id="app">
8    <ul>
9      <li v-for="(image, index) in images">
10        <input type="file" v-on:change="function(event) { onChange(event, index); }">
11        <img v-bind:src="image.url" />
12      </li>
13    </ul>
14  </div>
15
16  <script>
17    var app = new Vue({
18      el: '#app',
19      data: function() {
20        // リアクティブのためimagesをオブジェクトの配列にしておく
21        return({
22          images: [
23            { url: '' },
24            { url: '' },
25            { url: '' },
26          ],
27        });
28      },
29      methods: {
30        onChange: function(event, index) {
31          let file = event.target.files[0]
32          this.images[index].url = window.URL.createObjectURL(file);
33        },
34      },
35    });
36  </script>
37</body>
38</html>