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

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，我将不得不在每个 category 的父元素中嵌套 .categories 和 .subcategories，我不想这样做做。

整个混乱是我可以在父元素中使用 flex-direction: column 并且在呈现列表时，它会自动流到下一列，如果我嵌套 .categories 和 [=17= 就不会发生这种情况] 在父元素中，因为现在 categories 的每个父元素都将移动到下一列而不是其高度。

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

谢谢阿卡什.

Answer 1

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

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

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

Render nested list in vue without nesting HTML elements?

javascript

css

flexbox

vuejs2

v-for