[Vuejs]-Can't I change img src to hover image with onmouseover property when I turn data from vue to for statement?

by

0👍

Can you try to do something like this?

<li v-for="user in users" :key="user.id" class="nav-list" @mouseenter="onMouseEnter(user, $event)" @mouseleave="onMouseLeave(user, $event)">
  <router-link class="nav-link" :to="nameLowerCase(user.enName)">
    <img :src="imgSrc[user.id]">
    <p>{{user.enName}}</p>
  </router-link>
</li>


data: function(){
    return {
        imgSrc: [],
    }
},

methods: {
    onMouseEnter(user, event){
        this.setImgSrc(user, true);
    },
    onMouseLeave(user, event){
        this.setImgSrc(user, false);
    },
    setImgSrc(user, isHover) {
      const trimmedUrl = user.darkIconImageUrl;
      const trimmedColorUrl = user.lightIconImageUrl;    
      const trimmedBase = trim(AWS.BASEURL_ORIGINAL, '/');
      const trimmedBucket = trim(AWS.BUCKET, '/');
      if(isHover) {
        this.imgSrc[user.id] = `${trimmedBase}/${trimmedBucket}/${trimmedColorUrl}`;
      } 
      this.imgSrc[user.id] = `${trimmedBase}/${trimmedBucket}/${trimmedUrl}`;
    }, 
}

Leave a comment