[Vuejs]-Vuejs same function on multiple divs need to run seperately

by

0👍

✅

The reason why they both “shine” is because you have activeCardBg bound to both of them, which changes the background.

You could add the shine effect with pure CSS like this instead.

// CSS
.latestItemBody:hover {
    background-color: #7a00ff
}

If you want to do this with JS, it could be done like this.

 // Template
 <div 
   class="latestItemBody" 
   @mouseover="shineItemIcon"
   @mouseout="shineOff">
 </div>

 <div 
   class="latestItemBody" 
   @mouseover="shineItemIcon"
   @mouseout="shineOff">
 </div>

 // Methods
 shineItemIcon(e) {
    e.target.style.backgroundColor = '#7a00ff';
    this.bounce = 'animated bounceIn';
 },
 shineOff(e) {
    e.target.style.backgroundColor = '';
    this.bounce = '';
 }

0👍

pass the div id as parameter to the shineitemicon and shineoff function. depending upon the condition set ‘activeCardBg’ value. give activecardBg1 to first div and activeCardBg2 to second div.

Leave a comment