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

【问题标题】：How to select specific information in a specific object from an array of objects using Vue.js?如何使用 Vue.js 从对象数组中选择特定对象中的特定信息？
【发布时间】：2022-01-05 20:35:29
【问题描述】：

我目前正在完成一个在线全栈课程，该课程要求我将电子商务商店作为我的最终项目。项目说明的一部分是在我必须使用 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？

【问题讨论】：

vuejs.org/v2/guide/conditional.html
感谢您的回复@AnujRaghuvanshi，感谢您尝试帮助我学习。我希望当我问这个问题时我不会听起来太无知，但是，我将如何使用条件来专门针对数组中的对象中的信息？
您将使用重复来显示您的产品列表。您将可以访问重复部分中的对象。所以你可以对你的对象设置一个条件。是否添加了显示所有产品列表的逻辑？添加后，您将清除我上面的话。
我没有添加显示所有产品的逻辑，因为它们都是数组中的对象，我特别在努力从数组中提取对象及其内容并在我的设计中显示它们的信息分区。使用循环是我可以在数组中显示对象的唯一方法吗？

标签： javascript arrays vue.js object

【解决方案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>

【讨论】：

这看起来很有用，我很感激你帮助我学习的尝试。我将尝试使用您的示例并实施它，我将报告我的结果和任何其他问题！
如果这个答案对您有帮助，请随时欢迎。你可以投票:)
而且它的两个括号不是一个.. 它的 {{ }} 不是 { }
抱歉，如果此后续操作似乎有点无知，但我仍然无法显示任何内容。我的问题是，v-for="prod in shop" 中的 'prod' 是做什么的，它是从哪里来的？
okey... shop 是您的数组，...然后在该数组上的每个对象上进行 v-for 循环，并在每次迭代时将该对象分配给变量 prod。因此使用 prod 您可以显示该迭代的内容