在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，因此您必须确保categories数组包含子类别中键的exaxt名称。

您可以使用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>

​