CODEWITHSUNDEEP
cssvue.js
banky
banky

Reputation: 848

How to bind individual elements of a vue array to a class

I have an array of images returned from a API in my vue component, iterated and displayed like so:

<span v-for="pic in pics">
   <img :src="'images/'+pic" onmouseover="highlight(pic)" :class="{isHovered = hovered}" />
</span>

In my script:

data(){
    return {
       pics: [],
       hovered: false,
    }
},
methods:{
   highlight(pic){
       this.hovered = true;
  } 
}

In my css

isHovered{
    border: 2px solid red;
    scale: 1.2;
    cursor: pointer;
}

Problem is each time I hover over an image,all the images get the isHovered class. What I intended was to bind only the image hovered on to the isHovered class. What am i doing wrong please. Any guidance will be appreciated.

Upvotes: 2

Views: 91

Answers (3)

Vucko
Vucko

Reputation: 20834

I'm reading the OP but I can't find an answer why you can't use only CSS for that? It's a overkill to use Vue's logic for that.

// thanks to @C2486 for the snippet
var app = new Vue({
  el: "#app",
  data() {
    return {
      pics: [{
        img: "https://i.ytimg.com/vi/qV6y1SksAcE/maxresdefault.jpg"
      }, {
        img: "http://www.memorandum.com/wp-content/uploads/2018/05/trunk-club-memorandum-closet-staples-chic-working-girl-professional-women-capsule-wardrobe-10.jpg"
      }, {
        img: "http://www.memorandum.com/wp-content/uploads/2018/07/top-working-women-career-sites-17-680x1020.jpg"
      }]
    }
  }
});
.some-img-class:hover {
  border: 3px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div v-for="(pic,index) in pics">
      {{index+1}}
      <img :src="pic.img" width="60" class="some-img-class" />
    </div>
  </div>
</div>

Upvotes: 5

Husam Elbashir
Husam Elbashir

Reputation: 7177

That's because you have a single hovered property shared between all your pics. You need to re-write your pics so that each one has it's own hovered state. For example ..

data(){
    return {
       pics: [
          {id: 0, name: 'pic1.jpg', hovered: false},
          {id: 1, name: 'pic2.jpg', hovered: false},
          {id: 2, name: 'pic3.jpg', hovered: false},
          ...
       ]
    }
},
methods:{
   toggleHighlight(pic){
       pic.hovered = !pic.hovered;
  } 
}

Then in your template you can reference the individual hovered states ..

<span v-for="pic in pics">
   <img :src="'images/'+pic.name" onmouseover="toggleHighlight(pic)" :class="{isHovered: pic.hovered}" />
</span>

Upvotes: 2

Niklesh Raut
Niklesh Raut

Reputation: 34914

In your code you are trying to trigger hove effect for all image if any one image got hovered , Also you have syntax error to apply class. However there would be many way to achieve this, one way is like below

var app = new Vue({
el:"#app",
data(){
    return {
       pics: [{img:"https://i.ytimg.com/vi/qV6y1SksAcE/maxresdefault.jpg",hovered:false},{img:"http://www.memorandum.com/wp-content/uploads/2018/05/trunk-club-memorandum-closet-staples-chic-working-girl-professional-women-capsule-wardrobe-10.jpg",hovered:false},{img:"http://www.memorandum.com/wp-content/uploads/2018/07/top-working-women-career-sites-17-680x1020.jpg",hovered:false}],
       hovered: false,
    }
},
methods:{
   
 }
});
.isHovered{
  border:3px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div v-for="(pic,index) in pics">
   {{index+1}}
   <img :src="pic.img" v-on:mouseover="pic.hovered = true" :class="{isHovered:pic.hovered}" v-on:mouseout="pic.hovered = false" width="60"/>
</div>
</div>
</div>

Upvotes: 3

Related Questions