javascript - Vue : v-for loop through array if it has specific key:value pair

Question

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

My question is: With a list of dictionaries, how can I find and loopthrough one of the dictionaries, but only if it contains a specificvalue to a given key?

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

数据的结构如下:

data = {

    "categories": [

        {

            "title": "Pants",

            "products": [

                {

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

                }

            ]

        },

        {

            "title": "Sneakers",

            "products": [

                {

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

                }

            ]

        }, {...}

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

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

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

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

我集思广益并遇到的其他选项是:

<强>1。改变JS对象的结构

如果我将类别标题从其自己的字典中取出并重组数据，以便类别的标题是字典的键，产品是value，我将能够轻松定位该字典及其值。

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

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