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)'>☆</span>
<span :id='item.productID+2' class='btn star' @click='fillstar(item.productID,2)'>☆</span>
<span :id='item.productID+3' class='btn star' @click='fillstar(item.productID,3)'>☆</span>
<span :id='item.productID+4' class='btn star' @click='fillstar(item.productID,4)'>☆</span>
<span :id='item.productID+5' class='btn star' @click='fillstar(item.productID,5)'>☆</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;
}
});
}
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
}
}
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!
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; }