Question

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

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

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

数据的结构如下：

data = {

    "categories": [

        {

            "title": "Pants",

            "products": [

                {

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

                }

            ]

        },

        {

            "title": "Sneakers",

            "products": [

                {

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

                }

            ]

        }, {...}

我无法根据嵌套字典是否包含特定的键/值对来确定如何定位嵌套字典。我已经习惯了Python，所以我希望Vue支持类似于Pythonic一线式的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而乘积为{{1} }，我将能够轻松地定位该词典及其值。

此方法的问题在于，我不知道是否能够访问键的 actual 值，也就是说，如果键/值对是value，我将能够引用该键并因此在HTML中呈现字符串"foo" : "bar"？还是我必须保留定义类别标题的键/值对，并使用foo对其进行调用？这感觉很多余；喜欢它应该避免。考虑到这是我使用此选项的唯一问题，而且它很小，因此这是我一直追求的选择。

2。使用Vue组件

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

诚然，我还不熟悉如何在Vue中使用组件，因此不知道在这种情况下这是否是最佳解决方案。我已经查看了documentation,，从我所看到的看来，这也许是可行的方法。但是，如果我不需要Vue组件，我不愿意开始集成它们。如果问题出在您的电池上，为什么还要更换发电机？

感谢您阅读我的问题书，对于任何愿意提供帮助的人，我要在此先感谢您。我希望我的问题表达方式足够明确；当您长期关注某个问题时，很容易陷入抽象。请让我知道是否需要更改任何内容，我很乐意遵守。

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

Answer 2

使用计算属性，相关的vue文档：https://vuejs.org/v2/guide/computed.html

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>

Vue：v-for遍历数组，如果它具有特定的key：value对

2 个答案: