画像表示の切り替え Vue.js

Question

前提・実現したいこと

画像をクリックするとその画像が消え、別の画像がでてくるように設定したいです。

発生している問題・エラーメッセージ

上手く調べることができず、進めることができません。

該当のソースコード

Vue.js
<template>

<div class=container> <h1>a</h1> <img src="1675730.jpg" v-on:click="startRoulette" class="btn" v-if="box"> <div v-else> <h2>{{result}}</h2> <img :src="img_url"/> </div> </div> </template> <script> export default { // transitionの名前を決める transition: { name: 'fade' }, components: { }, data () { return { result: '', img_url: '', box: '' } }, mounted () { }, methods: { startRoulette () { // ルーレットを回す const spinRoulette = (awards) => { const hit = rand(1, dartboard(awards)) return dartboard(awards, hit) } // 重み付けの商品テーブルを生成 const dartboard = (awards, hit) => { let area = 0 for (const key in awards) { area += awards[key] if (hit && area >= hit) { return key } } return area } // 乱数(min ~ max) const rand = (min, max) => { return Math.floor(Math.random() * (max - min + 1) + min) } // 賞品テーブル const awards = { '5000円.jpg': 1, '300.jpg': 9, '100.jpg': 90 } this.img_url = spinRoulette(awards) this.result = 'おめでとうございます！ポイントを獲得しました。' this.box ==false } } } </script>

### 試したこと

v-if属性を使い、starRoulette処理前は真、処理後は偽になるように設定すればできると考えたのですが、その記述の仕方がわかりません。

Comments

[stakizawa]

ソースコードが少し読みづらいので、<template>の上に```を追加してください。

Answer 1

下記のコードで画像をクリック時に、動的に画像が切り替えられます。
修正箇所

• data内のboxの初期値をtrue
• 画像読み込み時に、requireメソッドの使用
• this.boxへの代入時にイコールが多いので削除

<template>
    <div class=container>
        <h1>a</h1>
        <img src="1675730.jpg" v-on:click="startRoulette" class="btn" v-if="box">
        <div v-else>
            <h2>{{result}}</h2>
            <img :src="img_url"/>
        </div>
    </div>
</template>

<script>
    export default {
        // transitionの名前を決める
        transition: {
            name: 'fade'
        },
        data () {
            return {
                result: '',
                img_url: '',
                box: true, // -> 初期状態をtrueにしてください
            }
        },
        methods: {
            startRoulette () {
                // ルーレットを回す
                const spinRoulette = (awards) => {
                    const hit = rand(1, dartboard(awards))
                    return dartboard(awards, hit)
                }
                // 重み付けの商品テーブルを生成
                const dartboard = (awards, hit) => {
                    let area = 0
                    for (const key in awards) {
                    area += awards[key]
                    if (hit && area >= hit) { return key }
                    }
                    return area
                }
                // 乱数(min ~ max)
                const rand = (min, max) => {
                    return Math.floor(Math.random() * (max - min + 1) + min)
                }
                // 賞品テーブル
                const awards = {
                    '5000円.jpg': 1,
                    '300.jpg': 9,
                    '100.jpg': 90
                }
                this.img_url = require(`@/assets/img/${spinRoulette(awards)}`) // -> 動的に画像を読み込む場合は、requireメソッドを使用します。
                this.result = 'おめでとうございます！ポイントを獲得しました。'
                this.box = false // -> =が１つ多いです。
            }
        }
    }
</script>