Vue：v-for循环遍历数组，如果它有特定的键：值对答案

【问题标题】：Vue: v-for loop through array if it has specific key:value pairVue：v-for循环遍历数组，如果它有特定的键：值对
【发布时间】：2018-07-31 14:15:27
【问题描述】：

我正在开发我的第一个 Vue 应用程序，但遇到了一些障碍。

我的问题是：使用字典列表，我如何查找和循环通过其中一个字典，但仅如果它包含特定的给定键的值？

就上下文而言，这是一家在线商店。我想遍历数据中的类别列表，并显示给定类别中的产品。

数据的结构如下：

data = {

    "categories": [

        {

            "title": "Pants",

            "products": [

                {

                    "name": "Levi Strauss",
                    "price": "$49.99",

                }

            ]

        },

        {

            "title": "Sneakers",

            "products": [

                {

                    "name": "Adidas",
                    "price": "$149.99",

                }

            ]

        }, {...}

我无法确定如何根据嵌套字典是否包含特定的键/值对来定位它。我已经习惯了 Python，所以我希望 Vue 能够支持类似于 Pythonic one-liner 的 v-for 语法，如下所示：

<template
    v-for="category.product in categories.products if category.title === Sneakers">
<p>{{ product.name }}</p>
<p>{{ product.price }}</p>

...但是这种类型的功能不在文档中，我在上周的搜索中也找不到等效功能。

我知道这个功能不太可能以我希望的方式存在，所以我可能需要调整我接近它的方式。我准备以正确的名义去做需要做的事情。

我集思广益并遇到的其他选择是：

1.改变 JS 对象的结构

如果我将类别 title 从它自己的字典中提取出来并重组数据，使类别的标题是字典的key，产品是value，我'将能够轻松定位该字典及其值。

我对这种方法的问题是我不知道我是否能够访问键的实际值——也就是说，如果键/值对是"foo" : "bar"，我能否引用密钥并因此在我的 HTML 中呈现字符串 foo？或者我是否必须保留一个定义类别标题的键/值对，并使用category.sneakers.title 调用它？这感觉是多余的；应该是可以避免的。鉴于这是我对这个选项的唯一问题，而且它是一个小问题，这是我一直倾向于的替代方案。

2。使用 Vue 组件

我设法找到另一个 Stack Overflow 帖子（当然，我现在找不到），其中发帖人提出了类似的问题。建议的解决方案是一个两部分的答案，其中一个解决方案是使用 Vue 组件。

诚然，我还不熟悉如何在 Vue 中使用组件，因此不知道在这种情况下它是否是最好的解决方案。我查看了documentation,，从我所见，看来这可能是要走的路。不过，如果它们不是我需要的，我不愿意开始集成 Vue 组件。如果问题确实是电池问题，为什么要更换交流发电机？

感谢您阅读我的问题书，我要提前感谢您愿意提供帮助的任何人。我希望我表达问题的方式足够清楚；当您长时间专注于一个问题时，很容易陷入抽象。请让我知道是否需要更改任何内容，我很乐意遵守。

【问题讨论】：

标签： javascript vue.js syntax iteration

【解决方案1】：

你可以使用嵌套循环：

<div v-for="category in categories" v-if="category.title === 'Sneakers'">
    <div v-for="product in category.products">
        <p>{{ product.name }}</p>
        <p>{{ product.price }}</p>
    </div>
</div>

或首先在计算属性中过滤您的类别，然后遍历它的产品。

computed: {
    myProducts() {
        return this.categories.filter( ( category ) => { 
             return category.name === 'Sneakers';
        })[ 0 ].products;
    }
}

在模板循环中通过产品：

<div v-for="product in myProducts">
     <p>{{ product.name }}</p>
     <p>{{ product.price }}</p>
</div>

【讨论】：

计算属性比更改模板更好，因为它 (a) 被缓存（直到它依赖的数据发生更改），并且 (b) 创建了一个不太复杂的模板，这有助于提高可读性和未来变化。使用计算属性准备数据或多或少是标准。
是的，你说得很好。我只是提供更多选择。但是你也应该从性能方面考虑它，随着数组大小的增长，你正在缓存更多的数据，而 Vue 必须观察更大的数组。感谢您的评论！

【解决方案2】：

使用computed property：

computed: {
  sneakerProducts() {
    return this.data.find(category => category.title === 'Sneakers').products;
  }
}

然后你可以从你的模板中做：

<div v-for="sneaker in sneakerProducts">
    <p>{{ sneaker.name }}</p>
    <p>{{ sneaker.price }}</p>
</div>

【讨论】：