Vue v-forを使って画像表示

あるサイトを真似てサイトを作成しています。
実現したいこと：v-forを使って画像表示　＋　マウスオーバーしたら画像切り替え

v-forを使って画像を３枚表示して、その３枚をそれぞれマウスオーバーしたら表示するという機能を作りたいと思っています。
v-forを使わずに作成することは可能でしたが、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>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app1">
    <img v-bind:src = "imageName"  width="100" height="100"></img>
    <div v-on:mouseover="imgchange1()">
      <img v-bind:src="item.image" v-for="item in items"  width="50" height="50">
    </div>

  <img v-bind:src = "imageName1" v-on:mouseover="imgchange1()" width="50" height="50"></img>
    <img v-bind:src = "imageName2" v-on:mouseover="imgchange2()" width="50" height="50"></img>
    <img v-bind:src = "imageName3" v-on:mouseover="imgchange3()" width="50" height="50"></img> 
  </div>
  <script type="text/javascript" src="../js/test.js"></script>
</body>
</html>

new Vue({
  el:"#app1",
  data:{
    imageName:"../image/food.jpg",
    imageName1:"../image/food.jpg",
    imageName2:"../image/food1.jpg",
    imageName3:"../image/food2.jpg",
    items:[
      {image:"../image/food.jpg"},
      {image:"../image/food1.jpg"},
      {image:"../image/food2.jpg"},
    ],
  },
    methods:{
      imgchange1:function(){
        this.imageName = this.imageName1
      },
      imgchange2:function(){
        this.imageName = this.imageName2
        this.imageName1 = this.imageName1
      },
      imgchange3:function(){
        this.imageName = this.imageName3
        this.imageName1 = this.imageName1
      }
    }
})

Matsumon0104

2022/06/16 07:29 編集

同じように作成できないというのは、画像が表示されないのか、イベント動作しないのか、いろいろ現象を考えてしまいますが、「同じように作成できない」の部分をもう少し詳しく記載いただくと、回答も得やすく思います。デベロップメントツールにエラーは出力されていますか？

Matsumon0104

2022/06/16 07:36

質問文にはクリックとありますが、マウスオーバーでしょうか？

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

回答1件

ベストアンサー

「v-for」は付与したエレメントに対して実行されます。
ですので、実際にレンダリングされるのはdiv内に複数のimgが作成される下記のようなイメージのhtmlです。

html
1<div v-on:mouseover="imgchange1()">
2      <img v-bind:src="item.image"  width="50" height="50">
3      <img v-bind:src="item.image"  width="50" height="50">
4      <img v-bind:src="item.image"  width="50" height="50">
5</div>

イメージ毎にイベントを与えたい場合は、

html
1<div >
2      <img v-bind:src="item.image" v-for="item in items" v-on:mouseover="imgchange1()" width="50" height="50">
3</div>
4
5または、
6
7<div v-on:mouseover="imgchange1()" v-for="item in items" >
8      <img v-bind:src="item.image"  width="50" height="50">
9</div>
10

ただし、このように修正した場合でも、イベントが同一のメソッドを参照しているため、希望するような動作は得られません。

メソッドの引数として、インデックスを与えてやるなどして、工夫する必要があるかと思います。

html
1<div v-on:mouseover="imgchange(idx)" v-for="(item, idx) in items" >
2      <img v-bind:src="item.image"  width="50" height="50">
3</div>

js
1imgchange:function(idx){
2
3    if (idx === 1) {
4        // 一つ目の画像がマウス―バー
5    } else if (idx === 2) {
6        // 二つ目の画像がマウス―バー
7    } else {
8        // etc
9    }
10},