vuejs マウスオーバー

実現したいこと：
大きい写真１枚とその下に小さい写真３枚の組み合わせを表示。
大きい写真の下に表示されている小さい写真３枚をそれぞれマウスオーバーしたら大きい写真がマウスオーバーした写真に切り替わる。
また、この組み合わせが２列、３列と増えたときにも
例えば２列目の写真をマウスオーバーしたら、２列目の大きい写真が切り替わる。３列目の写真をマウスオーバーしたら、３列目の大きい写真が切り替わる。
という風にしたい。

現在の状況：
２列目の写真をマウスオーバーすると１列目の大きい写真も切り替わる。同様に１列目の写真をマウスオーバーすると２列目の大きい写真も切り替わる。

個人的な考えとしてはv-forで同じ関数を取得してしまっているので、それを１列目は１列目、２列目は２列目のように列によって取得する関数を分けてあげればできるのかなと想像して調べたりしたのですが、いまいちわかりませんでした。
どうかお力添えいただけると嬉しいです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/test.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <ul id="example-1">
    <div v-for="(item, index) in items" id="restaurant">
      <!-- １つずつのお店 -->
      <div v-bind:class="restaurant_list" >
        <!-- 画像が表示されている列 -->
        <div v-bind:class="restaurant_image">
          <!-- 大きい写真の設定 -->
          <div>
            <img v-bind:src="item.main_image" v-bind:class="main_image">
          </div>
          <!-- 小見出しの写真 -->
          <div v-bind:class="image_label">
            <div>
              <img v-bind:src="item.image_sub1" v-bind:class="restaurant_image_images" v-on:mouseover="imgchange1()">
            </div>
            <div>
              <img v-bind:src="item.image_sub2" v-bind:class="restaurant_image_images" v-on:mouseover="imgchange2()">
            </div>            
            <div>
              <img v-bind:src="item.image_sub3" v-bind:class="restaurant_image_images" v-on:mouseover="imgchange3()">
            </div>
          </div>
        </div>
      </div>
    </div>
  </ul>
  <script type="text/javascript" src="../js/test_a.js"></script>
</body>
</html>

var example1 = new Vue({
  el: '#example-1',
  data:{
    //店名、写真、紹介文
    items: [
      { main_image: "../image/food.jpg", image_sub1:"../image/food.jpg", image_sub2:"../image/food1.jpg", image_sub3:"../image/food2.jpg", restaurant_name:"江戸政", restaurant_voice:"鶏肉の旨みを存分に味わえる、名物のタタキが人気の老舗焼き鳥",restaurant_chara:"焼き鳥好き", restaurant_popular:"人気店"},
      { main_image: "../image/taikojaya_1.jpg",image_sub1:"../image/taikojaya_2.jpg", image_sub2:"../image/taikojaya_3.jpg", image_sub3:"../image/taikojaya_4.jpg", restaurant_name:"たいこ茶屋", restaurant_voice:"お刺身食べ放題、ロケ地としても有名な海鮮料理屋さん",restaurant_chara:"海鮮好き", restaurant_popular:"人気店"},
    ],
    //お店の画像が並んでいる列の設定
    restaurant_image:"restaurant-image",
    //ひとつひとつのお店のリストの設定
    restaurant_list:"restaurant-list",
    //お店の一番大きい画像の設定
    main_image:"main-image",
    //小見出しの写真１枚ずつの設定
    restaurant_image_images:"restaurant-image-images",
    //小見出しのレイアウトの設定
    image_label:"image-label",
  },
  methods:{
    imgchange1:function(){
      this.items[0].main_image = this.items[0].image_sub1;
      this.items[1].main_image = this.items[1].image_sub1;
    },
    imgchange2:function(){
      this.items[0].main_image = this.items[0].image_sub2;
      this.items[1].main_image = this.items[1].image_sub2;
    },
    imgchange3:function(){
      this.items[0].main_image = this.items[0].image_sub3;
      this.items[1].main_image = this.items[1].image_sub3;
    }
  }
})



.restaurant-image{
  display: block;
  width: 220px;
  height: 272px;
  flex: 0 0 220px;
}

.restaurant-list{
  height:272px;
  width:auto;
  margin-bottom:50px;
  position:relative;
  display:flex;
  box-sizing:border-box;
  padding-right:16px;
  padding-left:16px;
}

.main-image{
  position: relative;
    display: block;
    width: 220px;
    height: 220px;
    box-sizing: border-box;
}

.restaurant-image-images{
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 3px;
  cursor: pointer;
  transition: opacity .6s ease-out;
}

.image-label{
  display: flex;
  align-items: flex-end;
  margin-top: 8px;
  padding-left:30px;
}

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

回答1件

ベストアンサー

ソースを見る限りでは、「items」のデータを基準として、「items」の要素数分の列を生成していると思います。
v-forでループさせる「index」が「items」のカレントの要素数となり、ひいては列数になるのかと思います。

マウスオーバーの引数として、indexを与え、その中の画像のパスを切り替えてやっている「items」の参照するindexに指定してやることで、作成した列ごとの制御になるかと思います。

html
1<div v-bind:class="image_label">
2    <div>
3        <img v-bind:src="item.image_sub1" v-bind:class="restaurant_image_images" v-on:mouseover="imgchange1(index)">
4    </div>
5    <div>
6        <img v-bind:src="item.image_sub2" v-bind:class="restaurant_image_images" v-on:mouseover="imgchange2(index)">
7    </div>            
8    <div>
9        <img v-bind:src="item.image_sub3" v-bind:class="restaurant_image_images" v-on:mouseover="imgchange3(index)">
10    </div>
11</div>

javascript
1imgchange1:function(index){
2      this.items[index].main_image = this.items[index].image_sub1;
3},
4imgchange2:function(index){
5      this.items[index].main_image = this.items[index].image_sub2;
6},
7imgchange3:function(index){
8      this.items[index].main_image = this.items[index].image_sub3;
9}