Question

我有点问题，无法解决的方法既找不到在Google上找到的相关内容，又或者我不知道要搜索什么。

我有一个数组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，因此您必须确保category数组包含子类别中的键的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>

在Vue中呈现嵌套列表而不嵌套HTML元素？

2 个答案: