I am currently finishing an online full-stack course that requires me to make an e-commerce store as my final project. A part of the project's instructions is to add an "add to cart" function where I must use Vue.js.
I currently have an array of objects like such:
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
}
]And I have a product display like such (using 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>My question is, is there any way that I can display the information in the objects in my array, but specifically choose which object and what information in that object I want to display, all using Vue.js?
Yes basically Vue.js does that very perfectly. you can iterate through the array and choose what do display, whats powerful is you can incorporate even the if-statement
Below is just an example using your array and html codes
<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>