Quiero reemplazar el botón de precio con el botón Agregar al carrito al pasar el mouse. El problema es el desencadenante de datos falsos verdaderos en cada elemento. ¿Cómo puedo señalar el artículo específico cuando ingreso el mouse en la sección de precios?
Aquí está el código: plantilla:
<!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>métodos:
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; } }); }Cuando recorre un elemento en vue, puede guardar su identificación en una variable de datos. No sé su código exacto, así que espero que pueda usar este ejemplo.
<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 } }Solo haz lo siguiente en tus métodos:
mouseEnter(id){ this.itemList.map((item)=>{ if(item.id == id){ this.add = true; this.setValue[index] = item.itemValue; //added line in here } }); }, hágalo también en mouseLeave() y declárelo en su data return de esta manera:
data() { return { this.setValue: "" } } en tu plantilla puedes comprobarlo con {{setValue[index]}}
¡Esto debería funcionar para ti!
¿Por qué usar js y no usar 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; }