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
}
]
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
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?
CodePudding user response:
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>