Визуализировать вложенный список в vue без вложенных элементов HTML? - PullRequest
Новая
       17

Визуализировать вложенный список в vue без вложенных элементов HTML?

0 голосов
/ 23 января 2019

У меня возникла небольшая проблема: я не могу придумать, как ее решить, и не могу найти что-либо релевантное в 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>
...

Если я использую v-for в vue, мне придется вкладывать .categories и .subcategories внутри родительского элемента для каждого category, что я не хочу делать.

Весь этот беспорядок в том, что я могу использовать flex-direction: column в родительском элементе и при рендерингесписок, он автоматически переходит к следующему столбцу, что не произойдет, если я вложу .categories и .subcategories в родительский элемент, поскольку теперь каждый родительский элемент для categories будет перемещаться к следующему столбцу вместо его высоты.

Так как же мне добиться этого, изменив CSS или структуру данных.

Спасибо, Акаш.

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Вот решение для вас !!!

Используя два цикла 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>
0 голосов
/ 23 января 2019

Обратите внимание, что в вашем вопросе Mobiles Accessories не равно Mobile Accessories, поэтому вы должны убедиться, что массив категорий содержит точные имена ключей в подкатегориях.

Вы можете использовать уменьшить и карту : 

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,
                })),
            ),
        [],
    ),
);
...