Actualmente estoy terminando un curso completo en línea que requiere que haga una tienda de comercio electrónico como mi proyecto final. Una parte de las instrucciones del proyecto es agregar una función de "agregar al carrito" donde debo usar Vue.js.
Actualmente tengo una variedad de objetos como tales:
const shop =[ { id : 1, name: "Spotify Plaque", price: 150, quantity: 0 }, { id : 2, name: "Keychain", price: 35, quantity: 0 }, { id : 3, name: "Cards", price: 30, quantity: 0 }, { id : 4, name: "Spotify Keychain", price: 35, quantity: 0 }, { id : 5, name: "Mugs", price: 70, quantity: 0 }, { id : 6, name: "Glass Cups", price: 70, quantity: 0 }, { id : 7, name: "Round Christmas Baubles", price: 45, quantity: 0 }, { id : 8, name: "Flat Christmas Baubles", price: 30, quantity: 0 } ]Y tengo una pantalla de producto como tal (usando bootstrap):
<div class="row"> <div class="col-md-6 col-lg-4 d-flex justify-content-center"> <div class="card" style="width: 18rem;"> <img src="./assets/images/spotifykeychain.jpg" class="card-img-top rounded" alt="..."> <div class="card-body"> <h5 class="card-title">Product Name Go Here</h5> <p class="card-text">Product Price Go Here</p> <a href="#" class="btn btn-danger"><i class="bi bi-cart-plus"></i> Add to Cart</a> </div> </div> </div> </div>Mi pregunta es, ¿hay alguna manera de mostrar la información en los objetos de mi matriz, pero elegir específicamente qué objeto y qué información en ese objeto quiero mostrar, todo usando Vue.js?
Sí, básicamente Vue.js lo hace perfectamente. puede iterar a través de la matriz y elegir qué mostrar, lo poderoso es que puede incorporar incluso la if-statement
A continuación se muestra solo un ejemplo usando su matriz y códigos html
<div class="row"> <div class="col-md-6 col-lg-4 d-flex justify-content-center" v-for ="prod in shop" :key = "prod.id"> <div class="card" style="width: 18rem;"> <img src="./assets/images/spotifykeychain.jpg" class="card-img-top rounded" alt="..."> <div class="card-body"> <h5 class="card-title">{{prod.name}}</h5> <p class="card-text">usd {{prod.price}}</p> <a href="#" class="btn btn-danger"><i class="bi bi-cart-plus"></i> Add to Cart {{prod.quantity}}</a> </div> </div> </div> </div>