如何使用 Vue.js 從對象數組中獲取特定 object 中的 select 特定信息？

Question

我目前正在完成一個在線全棧課程，該課程要求我將電子商務商店作為我的最終項目。 項目說明的一部分是添加“添加到購物車”function，我必須使用 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>

我的問題是，有什么方法可以顯示數組中對象中的信息，但具體選擇哪個 object 以及我想顯示的 object 中的哪些信息，全部使用 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>