vue.js マウスオーバー時の画像切り替えについて

Question

実現したいこと

v-forで表示させた3枚の画像に触れた（マウスオーバー）とき、
<img v-bind:src="imageName" class="imgName">で表示されている画像へ上書きして切り替わらせたいです。

methods内でthisを使用してtagを上書きして表示させようとしましたが、undefinedになってしまいました。コンソールで確認したところ、そもそも画像パスが取得できていません。

どう修正すれば良いかアドバイスを頂けると嬉しいです。
よろしくお願いいたします。

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

Error in v-on handler: "ReferenceError: imgLists is not defined"

該当のソースコード

  <div id="app">
    <div class="flex">
    <img v-bind:src="imageName" class="imgName">
    <div class="right">
      <h3 class="title">{{ title }}</h3>
      <p class="address">{{ address }}</p>
      <img v-bind:src="tag" class="tagimg">
    </div>
  </div>
  <ul>
    <li v-for="imgList in imgLists" class="imgList_img"><img v-on:mouseover="changeImg()" v-bind:src="imgList.src" class="imgList_img"></li>
  </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="./item.js"></script>
</body>

new Vue({
  el: '#app',
  data: {
    title: '店名',
    address: '住所',
    imageName: '.png',
    tag: '.png',
    imgLists:[
    {
      src:".jpeg",
    },
    {
      src: ".jpeg",
    },
    {
      src:".jpeg"
    }]
  },
  methods:{
    changeImg: function(event){
      this.tag = imgLists.src
    }
  }
})

Answer 1

「data」の「imgLists」を参照したい場合、「this」が必要かと思います。
また、「imgLists」は配列なので、添え字が必要です。

changeImg: function(event){
      this.tag = this.imgLists[0].src
}

Comments

[SyBana]

ありがとうございます！！
配列時の添字を忘れていました。指定したい際は利用したいと思います。

Answer 2

this.tagならthis.imgListsでは？それでもどの配列か判断できないから
引数で渡さないといけない気がするけど。

<li v-for="imgList in imgLists" class="imgList_img">
  <img v-on:mouseover="changeImg(imgList.src)" v-bind:src="imgList.src" class="imgList_img">
</li>

    changeImg: function(src){
      //this.tag = this.imgLists[0].src
      this.tag = src
    }

Comments

[SyBana]

早速ありがとうございます！
引数に渡すまでの知識がなかったので勉強になりました。