Vue.jsでbuttonを押した際に値を取得して画像を表示させたい

Question

1. 時間ボタンを押す
2. そのボタンのvalueを取得する
3. 同じ文字列を持つimg要素のshowをtrueにし、それ以外を全てfalseにする

上記の機能を実装したいのですが、
0. methodsに引数を渡す、
0. その値をimg要素が持つ文字列と照合する、
0. 対応した文字列を持つimgのshowをtrueにする

という部分が調べてもわからず質問させていただきました。
以下コードになります。

---

        <div id="app">
            <div>
                <div id="imgArea">
                    <img :src="itemsDire[index].src" :alt="itemsDire[index].alt" class="imgCanvas">
                    <div v-show="showA">
                        <div v-for="item in itemsA" :val="item.value">
                            <img :key="item.src" :src="item.src" :alt="item.alt" v-show="showShadow" class="imgCanvas" :class="item.class">
                        </div>
                    </div>
                    <div v-show="showB">
                        <div v-for="item in itemsB" :val="item.value">
                            <img :key="item.src" :src="item.src" :alt="item.alt" v-show="showShadow" class="imgCanvas" :class="item.class">
                        </div>
                    </div>
                </div>
                <div id="btnArea">
                    <div id="directionBtnArea">
                        <input type="button" @click="changeNW" value="NW">
                        <input type="button" @click="changeNE" value="NE">
                        <input type="button" @click="changeSE" value="SE">
                        <input type="button" @click="changeSW" value="SW">
                    </div>
                    <div id="shadowBtnArea">
                        <input type="button" v-for="item in itemTimes" @click="changeShadow" :value="item" :class="item">
                    </div>
                    <div id="seasonBtnArea">
                        <input type="button" @click="showA=!showA" value="A">
                        <input type="button" @click="showB=!showB" value="B">
                    </div>
                </div>
            </div>
        </div>

new Vue ({
    el: '#app',
    data: {
        itemsDire: [],
        itemsA: [],
        itemsB: [],
        itemTimes:['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00'],
        index: 0,
        showA: true,
        showB: false,
        showShadow: true
    },
    methods: {
        changeNW: function() {
            axios.get('json/NW.json').then(function(response) {
                console.log(response)
                this.itemsDire = response.data[0].imageDire;
                this.itemsA = response.data[0].imageA;
                this.itemsB = response.data[0].imageB;
            }.bind(this)).catch(function(e) {
                console.error('error!')
            })
        },
        changeNE: function() {
            axios.get('json/NE.json').then(function(response) {
                console.log(response)
                this.itemsDire = response.data[0].imageDire;
                this.itemsA = response.data[0].imageA;
                this.itemsB = response.data[0].imageB;
            }.bind(this)).catch(function(e) {
                console.error('error!')
            })
        },
        changeSE: function() {
            axios.get('json/SE.json').then(function(response) {
                console.log(response)
                this.itemsDire = response.data[0].imageDire;
                this.itemsA = response.data[0].imageA;
                this.itemsB = response.data[0].imageB;
            }.bind(this)).catch(function(e) {
                console.error('error!')
            })
        },
        changeSW: function() {
            axios.get('json/SW.json').then(function(response) {
                console.log(response)
                this.itemsDire = response.data[0].imageDire;
                this.itemsA = response.data[0].imageA;
                this.itemsB = response.data[0].imageB;
            }.bind(this)).catch(function(e) {
                console.error('error!')
            })
        },
        changeShadow: function() {
            this.value = event.target.value;
            console.log(this.value);
        }
    },
    created: function() {
        axios.get('json/NW.json').then(function(response) {
            console.log(response)
                this.itemsDire = response.data[0].imageDire;
                this.itemsA = response.data[0].imageA;
                this.itemsB = response.data[0].imageB;
        }.bind(this)).catch(function(e) {
            console.error('error!')
        })
    }
})

---

追記
先のコードだとわかりにくいと思い修正をさせていただきました。
まず土台となる画像（itemDire）を表示し、季節の選択（AかBか）、その後時間を指定して影を表示させるという流れになっております。
全ての画像はaxiosを使い、jsonファイルでdata内のそれぞれの配列に入れています。

現状はevent.target.valueでボタンに設定したvalue（時間）を取得できましたが、その後どうやってdata内部の配列（itemAとitemB）と比較をしshowを切り替えるかという部分です。

---

このままmethodsのみで処理できるのか、computedを使うのか、componentで受け渡しをした方がスマートなのかわからずに困っております。
ご回答よろしくお願いします。

Comments

[sousuke]

他の方のためにも解決方法や原因などを載せた方がよろしいかと思います。
ベストアンサーありがとうございます。

Answer 1

#追記

var v = new Vue ({
    el: '#app',
    data: {
        items: [],
        itemTimes:['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00'],
        index: 0,
    }
    ,created:function(){
        this.items=['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00'];
    }
})

例えばこうしても動きます。順番に本番のコードのように近づけて行けば
そのうちなにかわかるのではないでしょうか

#以下追記前
クリックして代入するんならラジオボタンにしてv-modelに入れた方が楽だと思います。ラベルをボタンっぽく見せれば大丈夫かと。

想像でindexとか使ってます、ずれてたら申し訳ない。

<!doctype html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
      <div id="imgArea">
       <div v-for="item in items">
         <div class="imgCanvas" v-show="item == items[index]">{{item}}</div>
       </div>
      </div>
      <div id="BtnArea">
       <label v-for="(i,v) in itemTimes"  class="timeButton">
        {{ v }}
        <input type="radio" v-bind:value="i" v-model="index" style="display:none;">
       </label>
       
      </div>
    </div>
</body>

<script>
var v = new Vue ({
    el: '#app',
    data: {
        items: ['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00'],
        itemTimes:['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00'],
        index: 0,
    }
})
</script>
</html>

Comments

[退会済みユーザー]

回答ありがとうございます。
教えていただいたコードはうまく動くのですが、本番環境で同じように構築しても画像の切り替えが行われません…
axiosで配列の中身をまるまる入れ替えているのが原因でしょうか？
重ね重ね質問申し訳ありません。

[sousuke]

なんかコード増えてますね。
vueの配列の入れ替えは検知できるものとできないものがあります。
私のコードで動くのであればここから置き換えて言ったほうがいいと思います。