如何使用Vue.js从对象数组中选择特定对象中的特定信息？

Question

我目前正在完成一个在线全栈课程，要求我做一个电子商务商店作为我的最后项目。项目说明的一部分是添加一个“添加到购物车”函数，其中我必须使用Vue.js。

我目前有一个类似于这样的对象数组：

​

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
    }
]

​

我有这样的产品显示器(使用引导)：

​

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

​

我的问题是，是否有任何方法可以显示数组中对象中的信息，但具体地选择我想要显示的对象中的哪个对象和哪些信息，所有这些都使用Vue.js？

Answer 1

是的，基本上Vue.js做的非常完美。您可以遍历数组并选择要显示的内容，功能强大的是您甚至可以合并if-statement。

下面只是一个使用数组和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>