ラジオボタンで写真を変化させたい

Question

いつもお世話になっております。

現在ECサイトのモックアップを練習していまして、

＜目標＞
・ラジオボタンで表示される画像を切替えたい

下記の画像のように、photo1をクリックすると、PickedがOneと表示され、photo2をクイックするとTwoと表示するところまでできたのですが、imgをどう挿入すればいいかがわかりません。

画像自体は、componentsの中のimagesに入れようと考えています。

試したこと、下記のコードの中のvalue="one"部分を、value="画像のURL"にしたのですが、やはりimgタグではいので上手く行きませんでした.

普段はPythonなどでバックエンドの方しか触っておらず、HTML&CSSですら、かなり前に学んだことがある程度なので、初歩的なミスを犯してはいると思いますが、ご助力いただけると幸いです。

コード下(Vue.js, Boostrap)

<template>
<div class="category-page">
  <h3>{{product.title}}</h3>
  <b-row>
    <b-col cols="5">
      <input type="radio" id="one" value="one" v-model="picked">
      <label for="one">photo1</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">photo2</label>
      <br>
      <span>Picked: {{ picked }} </span>
      <img :src="product.image" class="product-image" />

    </b-col>
    <b-col cols="7">
      <p>
        {{product.description}}
      </p>

      <p>
        Option selected: {{defaultOption.title}}
      </p>

      <p>
        Price: ${{defaultOption.price}}
      </p>

      <button v-on:click="counter += 1">+</button>
      {{counter}}
      <button v-on:click="counter -= 1">-</button>

    </b-col>
  </b-row>
</div>
</template>

<script>
import axios from "axios";
export default {
  name: 'ProductPage',
  data: function() {
    return {
      picked: {},
      counter: 0,
      product: {},
      defaultOption: {}
    }
  },
  mounted() {
    axios
      .get("https://euas.person.ee/products/" + this.$route.params.productId)
      .then(response => {
        this.product = response.data;
        this.defaultOption = this.product.options[0];
      });
  }
}
</script>

<style scoped>
.product-image {
  width: 300px;
}
</style>

Answer 1

computedを使った方法になるとこんな感じですかね。
electron-vue環境での確認ですがvueの仕様には従っているので大丈夫だと思います。

computedでpicked要素の変更を検知してimgの参照画像を変更します。
product.image要素のキーとラジオボタンvalueの名前を合わせることで動的に変更できます。

imgで読み込む画像パスを変数で動的に変えることも考えたのですが、
画像を動的に使うにはrequire関数でモジュール化しておく必要があり、
require関数の引数には変数が使えないようなのでこういう形になりました。

<template>
・・・
    <b-col cols="5">
      <input type="radio" id="one" value="one" v-model="picked">
      <label for="one">photo1</label>
      <br>
      <input type="radio" id="two" value="two" v-model="picked">
      <label for="two">photo2</label>
      <br>
      <span>Picked: {{ picked }} </span>
      <img :src="productImage" class="product-image" />

    </b-col>
・・・
</template>

<script>
・・・
    // データ構造
    data() {
      return {
        picked: {},
        counter: 0,
        product: {
          image: {
            one: require('@/img/one.png'),
            two: require('@/img/two.png'),
          },
        },
        defaultOption: {},
      };
    },
・・・
    computed: {
      productImage() {
        return this.product.image[this.picked];
      },
    },
・・・
</script>

Comments

[Swedon]

回答ありがとうございます。

ご指摘の通り修正したのですが、横のメニューバー以外、真っ白になってしまいます。
写真のサイズも関係しているのでしょうか？

[yureighost]

ラジオボタンまで出ないとなるとエラーの可能性が高いですね。
vue.jsの場合コンパイル実行してるはずですからどこかに出力されていると思いますが、
わかりますでしょうか。

[Swedon]

デバッカには下記のように表示されています
要素にはメニュー以外含まれていませんでした.

module.exports = function(it) {
if (typeof it != 'function') {
throw TypeError(String(it) + ' is not a function');
}
return it;
};
//# sourceURL=[module]
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvY29yZS1qcy9pbnRlcm5hbHMvYS1mdW5jdGlvbi5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL25vZGVfbW9kdWxlcy9jb3JlLWpzL2ludGVybmFscy9hLWZ1bmN0aW9uLmpzPzFjMGIiXSwic291cmNlc0NvbnRlbnQiOlsibW9kdWxlLmV4cG9ydHMgPSBmdW5jdGlvbiAoaXQpIHtcbiAgaWYgKHR5cGVvZiBpdCAhPSAnZnVuY3Rpb24nKSB7XG4gICAgdGhyb3cgVHlwZUVycm9yKFN0cmluZyhpdCkgKyAnIGlzIG5vdCBhIGZ1bmN0aW9uJyk7XG4gIH0gcmV0dXJuIGl0O1xufTtcbiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=
//# sourceURL=webpack-internal:///./node_modules/core-js/internals/a-function.js

[yureighost]

恐らくvue.jsをコンソールとかから実行してると思うんですが、
そちらには何か出力されてませんでしょうか。

[Swedon]

App running at:
- Local: http://localhost:8080/
- Network: http://10.11.0.49:8080/

エラーは表示されていません

[Swedon]

すいません、Atomを再起動すると、再度表示されました。

[Swedon]

<template>
<div class="category-page">
<h3>{{product.title}}</h3>
<b-row>
<b-col cols="5">
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">photo1</label>
<br>
<input type="radio" id="two" value="two" v-model="picked">
<label for="two">photo2</label>
<br>
<span>Picked: {{ picked }} </span>
<img :src="photoImage" class="photo-image" />
<img :src="productImage" class="product-image" />

</b-col>
<b-col cols="7">
<p>
{{product.description}}
</p>

<p>
Option selected: {{defaultOption.title}}
</p>

<p>
Price: ${{defaultOption.price}}
</p>

<button v-on:click="counter += 1">+</button>
{{counter}}
<button v-on:click="counter -= 1">-</button>

</b-col>
</b-row>
</div>
</template>

<script>
import axios from "axios";
export default {
name: 'ProductPage',
data: function() {
return {
picked: {},
counter: 0,
product: {},
photo: {
image: {
one: require('./images/p1.png'),
two: require('./images/p2.png'),
},
},
defaultOption: {}
}
},

mounted() {
axios
.get("https://euas.person.ee/products/" + this.$route.params.productId)
.then(response => {
this.product = response.data;
this.defaultOption = this.product.options[0];
});
},

computed: {
productImage() {
return this.product.image[this.picked];
},
},

}
</script>

<style scoped>
.product-image {
width: 300px;
}
</style>

変更語のコード↑
・画像は未だ切り替わりません
<img :src="productImage" class="product-image" />がないと、画像自体が表示されない状況です

[yureighost]

photoの配下の方にimageを追加されてますね。
でしたら、productImage()関数のソースを
return this.photo.image[this.picked];
としてください。

[Swedon]

初歩的なミスですみません。
本当に長々お付き合いいただいてありがとうございます。
Productの配下ですと、他の画像が追加されてしまうみたいなので、photoを新たに追加したのですが、詰めが甘かったです。

後学のために、下記にコードを記載させてください。
<template>
<div class="category-page">
<h3>{{product.title}}</h3>
<b-row>
<b-col cols="5">
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">photo1</label>
<br>
<input type="radio" id="two" value="two" v-model="picked">
<label for="two">photo2</label>
<br>
<span>Picked: {{ picked }} </span>
<img :src="productImage" class="product-image" />

</b-col>
<b-col cols="7">
<p>
{{product.description}}
</p>

<p>
Option selected: {{defaultOption.title}}
</p>

<p>
Price: ${{defaultOption.price}}
</p>

<button v-on:click="counter += 1">+</button>
{{counter}}
<button v-on:click="counter -= 1">-</button>

</b-col>
</b-row>
</div>
</template>

<script>
import axios from "axios";
export default {
name: 'ProductPage',
data: function() {
return {
picked: {},
counter: 0,
product: {},
photo: {
image: {
one: require('./images/p1.png'),
two: require('./images/p2.png'),
},
},
defaultOption: {}
}
},

mounted() {
axios
.get("https://euas.person.ee/products/" + this.$route.params.productId)
.then(response => {
this.product = response.data;
this.defaultOption = this.product.options[0];
});
},

computed: {
productImage() {
return this.photo.image[this.picked];
},
},

}
</script>

<style scoped>
.product-image {
width: 300px;
}
</style>

Answer 2

今環境が無いので文法間違いとかあるかもですが・・・

<span v-if='picked === 'one'>
<img src="画像URL1" class="product-image" />
</span>
<span v-else-if='picked === 'two'>
<img src="画像URL2" class="product-image" />
</span>

簡単に実現するならこのような感じで出しわけられると思います。

参考
https://jp.vuejs.org/v2/guide/conditional.html

あとはsrcにセットするURLの出しわけを行うcomputedメソッドを作ってそれ:srcで呼び出すとかでもいけるきがします。

Comments

[Swedon]

ご指摘の通り修正したのですが、下記のエラーが表示されます

error 'v-if' directives require that attribute value vue/valid-v-if
14:30 error Parsing error: Unexpected end of expression vue/no-parsing-error
14:31 error Parsing error: missing-whitespace-between-attributes vue/no-parsing-error
14:34 error Parsing error: unexpected-character-in-attribute-name vue/no-parsing-error

[akbr]

もう他の方のコメントで解決されたかと思いますが一応
IF行のクオートが不足していましたね
<span v-if="picked === 'one'">
・・・
<span v-else-if="picked === 'two'">
のようにしたら大丈夫だったのかもしれません。
ご参考まで

Answer 3

現時点で v-model='picked'　と　画像の　:src=product.image は変更されたイベントが紐付いていません。

その場合、:src=product.image は　算出プロパティ（computed)使ってラップし、ラジオボタンにチェックがついている値に応じて算出プロパティの戻り値を変更するようにするとよいと思います。

<img :src="computedImageSrc" class="product-image" />

  computed: {
    innerImageUrl() {
      let imgSrc
      // picked になったアイテムのValueとProductを紐付けるコードを書く
      // 例えば this.picked の値に応じて imgSrcにはthis.product.imageをセットするなど
      return imgSrc
    }
  },