Is there a way to change the price button to an Add to Cart button on mouseover, considering the true false data trigger for each item? How can we specify which item to target when hovering over the price section?
Below is the code snippet: 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;
}
});
}