Mouseover on specific item through loop in Vue js

Question

I want to replace the price button with Add to cart button by mouseover. Problem is the true false data trigger on every single item . How can I point the specific item when I enter mouse on the price section.

Here is the code: template:

 <!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <div>
        <div v-for='(item,index) in itemList' :key='index'  class="col-md-6 ">
            <img :src="require('../assets/img/'+item.itemImg)" class='itemImage6' alt="">
            <span class='itemSpan6'>{{item.title}}</span>
            <span class='itemSpanSecond6'>{{item.itemName}}</span>
            <div  @mouseenter='mouseEnter(index)' @mouseleave='mouseLeave(index)'>
             <span class='btn itemSpan' :id='item.productID' v-if='!add' > ${{item.itemValue}}</span>
            <span class='btn itemSapn' v-if='add' style='color:white;background:#b4a895;' ><i class="fas fa-plus"></i></span>
            </div>
            <div class="star_rating">
              <span  :id="item.productID+1" class='btn star' @click='fillstar(item.productID,1)'>&star;</span>
              <span  :id='item.productID+2' class='btn star' @click='fillstar(item.productID,2)'>&star;</span>
              <span  :id='item.productID+3' class='btn star' @click='fillstar(item.productID,3)'>&star;</span>
              <span  :id='item.productID+4' class='btn star' @click='fillstar(item.productID,4)'>&star;</span>
              <span  :id='item.productID+5' class='btn star' @click='fillstar(item.productID,5)'>&star;</span>
            </div> 
          </div>
</div>
</body>
</html>

methods:

   mouseEnter(id){
      this.itemList.map((item)=>{
        if(item.id == id){
          this.add=true;
        }
      });
    },
    mouseLeave(id){
      this.itemList.map((item)=>{
        if(item.id == id){
          this.add=false;
        }
      });
    }

Whitespacecode · Accepted Answer · 2021-11-15 13:11:41Z

4

When you loop trough an item in vue you can save your id in a data variable. I don't know your exact code so i hope you can use this example.

<div v-for="(item, index) in itemList">
  <button @mouseleave="action = null"
          @mouseover="action = item.id"
 >
    hover button
 </button>
 <span v-show="action === item.id">Add to cart</span>
</div>
data() {
  return {
    action: null
  }
}

answered Nov 15, 2021 at 13:11

Whitespacecode

1,3981 gold badge7 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

B0BBY · Accepted Answer · 2021-11-15 13:03:37Z

1

Just do following in your methods:

mouseEnter(id){
      this.itemList.map((item)=>{
        if(item.id == id){
          this.add = true;
          this.setValue[index] = item.itemValue; //added line in here
        }
      });
    },

please do it on mouseLeave() too, and declare it in your data return like this:

data() {
  return {
    this.setValue: ""
  }
}

in your template you can check it with {{setValue[index]}}

this should work out for you!

answered Nov 15, 2021 at 13:03

B0BBY

1,1192 gold badges13 silver badges31 bronze badges

Comments

Robert Cabri · Accepted Answer · 2021-11-15 13:06:23Z

1

Why use js and not use CSS?

// in your component
<a href="#" class="link">
  <span class='btn itemSpan btn-value' :id='item.productID'>${{item.itemValue}}</span>
  <span class='btn itemSapn btn-add' style='color:white;background:#b4a895;' ><i class="fas fa-plus"></i></span>
</a>

// in css
.btn-add { display: none; }
a.link:hover .btn-add { display: block; }
a.link:hover .btn-value { display: none; }

answered Nov 15, 2021 at 13:06

Robert Cabri

4,0111 gold badge22 silver badges17 bronze badges

1 Comment

enamul haque Over a year ago

Thanks , that is fast and easier!!

Collectives™ on Stack Overflow

Mouseover on specific item through loop in Vue js

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related