以下のコードでボタンAをクリックしたときに、ボタンAの色と画像を切り替えて、尚且つボタンBのテキストと画像も変えたいのですがどのような記述をすればよいでしょうか？

clickイベントで検索して実行してみましたが何も起きずに詰まってしまいました。

Aボタン押すと、Aボタンの色が赤色→青色、リンゴの画像がバナナ
尚且つ、BボタンのテキストがCに変更、画像もバナナからメロンに変わる

vue.js
1 <template>
2   <v-btn height="50px" width="50px" color="red">
3     <v-col style="font-size: 30px;">A</v-col>
4     <v-img src="static/assets/image/apple"></v-img>
5   </v-btn>
6   <v-btn height="50px" width="50px" color="red">
7     <v-col style="font-size: 30px;">B</v-col>
8     <v-img src="static/assets/image/banana"></v-img>
9   </v-btn>
10</template>

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

回答1件

ベストアンサー

値をバインドします。

js
1<img :src="image">
2
3data () {
4  return {
5    image: "neko.jpg"
6  }
7}

image の値を書き換えれば <img src="..."> も書き換わります。

js
1methods: {
2  click () {
3    this.image = "inu.jpg"
4  }
5}

color も同じように

<v-btn height="50px" width="50px" :color="color">

data () {
  return {
    color: "red"
  }
},
methods: {
  click () {
    this.color = "blue"
  }
}

テキストは

<button>{{text}}</button>

data () {
  return {
    text: "B"
  }
},
methods: {
  click () {
    this.text = "C"
  }
}

まとめると

js
1<template>
2  <v-btn :color="a.color" @click="click">{{a.text}}</v-btn>
3  <img :src="a.image">
4
5  <v-btn :color="b.color">{{b.text}}</v-btn>
6  <img :src="b.image">
7</template>
8
9<script>
10export default {
11  data () {
12    return {
13      a: {
14        text: "A",
15        color: "red",
16        image: "apple.jpg"
17      },
18      b: {
19        text: "B",
20        color: "red",
21        image: "banana.jpg"
22      },
23    }
24  },
25  methods: {
26    click () {
27      this.a.color = "blue"
28      this.a.image = "banana.jpg"
29      this.b.text = "C"
30      this.b.image = "melon.jpg"
31    }
32  }
33}
34</script>