javascript - 在不嵌套 HTML 元素的情况下在 vue 中渲染嵌套列表？

Question

我遇到了一些问题，想不出解决办法，也无法在谷歌上找到任何相关内容，或者我不知道要搜索什么。

我有一个数组 categories和一个包含 subcategories 的对象

categories: [
    'Mobiles',
    'Mobiles Accessories',
    ...
]

subcategories: {
    'Mobiles': [
        'Mi',
        'Samsung',
        'Infinix',
        ...
    ],
    'Mobile Accessories': [
        'Mobiles Cases',
        'Headphones & Earphones',
        ...
    ]
}

现在我想用下面的方式渲染一个菜单。

<span class="category">Mobiles</span>
<span class="subcategory">Mi</span>
<span class="subcategory">Samsung</span>
<span class="subcategory">Infinix</span>
...
<span class="category">Mobile Accessories</span>
<span class="subcategory">Mobiles Cases</span>
<span class="subcategory">Headphones & Earphones</span>
...

如果我使用 v-for在 vue 中，我将不得不嵌套 .categories和 .subcategories在每个 category 的父元素中，我不想这样做。

整个困惑是我可以使用 flex-direction: column在父元素中和呈现列表时，它会自动流到下一列，如果我嵌套 .categories 就不会发生这种情况和 .subcategories在一个父元素中作为现在 categories 的每个父元素将移动到下一列而不是它的高度。

那么我如何通过更改 CSS 来实现这一点？或数据结构。

谢谢 阿卡什。

Answer 1

请注意，在您的问题中，Mobile Accessories 不等于 Mobile Accessories，因此您必须确保类别数组包含子类别中键的确切名称。

您可以使用 reduce和 map :

const categories = ['Mobiles', 'Mobile Accessories'];

const subcategories = {
    Mobiles: ['Mi', 'Samsung', 'Infinix'],
    'Mobile Accessories': ['Mobiles Cases', 'Headphones & Earphones'],
};

console.log(
    categories.reduce(
        (result, value) =>
            result.concat(
                { class: 'category', value },
                subcategories[value].map((value) => ({
                    class: 'subcategory',
                    value,
                })),
            ),
        [],
    ),
);