在 vue 中渲染嵌套列表而不嵌套 HTML 元素？

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

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

这整个混乱是我可以在父元素中使用flex-direction: column，并且在呈现列表时，它会自动流向下一列，如果我将.categories和.subcategories嵌套在父元素中，就像现在每个一样categories 的父元素将移至下一列而不是其高度。

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

谢谢 阿卡什。

Answer 1

请注意，在您的问题中，Mobiles 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,
                })),
            ),
        [],
    ),
);

Answer 2

这里是你的解决方案！！！

使用两个 for 循环可以做到这一点。

var app = new Vue({
  el: '#app',
  data: {
    menu: {
      categories:[
      'Accessories',
     'Mobiles',
     ],
    subcategories: {
       'Accessories': [
        'Mobiles Cases',
        'Headphones & Earphones',        
    ],
    'Mobiles': [
        'Mi',
        'Samsung',
        'Infinix'
    ],
   
}
  }
  }
});

.category{
display:block;
padding:10px 0px;
}
.subcategory{
display:block:
margin:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div v-for="(menus,index) in menu.categories">
      <span class="category">{{ menus }}</span>
        <span class="subcategory" v-for="(submenu,index) in menu.subcategories[menus]">{{submenu}}<br/></span>
    </div>
</div>