Home > Software design >  How to select specific information in a specific object from an array of objects using Vue.js?
How to select specific information in a specific object from an array of objects using Vue.js?

Time:12-01

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>
  • Related