Mouseover on specific item through loop in Vue js-CodePudding

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'  >
            <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 ></i></span>
            </div>
            <div >
              <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;
        }
      });
    }

CodePudding user response：

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
  }
}

CodePudding user response：

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!

CodePudding user response：

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; }