L oop над объектом данных Vuejs для создания меню

Question

Я ищу создание меню путем итерации вложенного объекта в объекте данных Vuejs.

Вот l oop, о котором я думал:

<ul v-for="category in categories" :key="category">  {{ category }}
  <li v-for="subCategory in category" :key="subCategory">
    <router-link to="/"> {{ subCategory }} </router-link>
  </li>
</ul>

Это было бы простое меню с одним уровнем вложенных подменю.

categories: [{
  Atoms: ['Buttons', 'Icons'],
  Molecules: [],
  Organisms: [],
  Templates: [],
  Utilities: ['Grid']
}]

Это компонент, поэтому с данными: function () {}.

Я знаю это простая проблема, но мне не удается получить чистый список с меню (Atoms, Molecules ...) в качестве ul и подменю (строка в каждом массиве) в качестве li. Прямо сейчас я получаю весь массив на экране, с [] и {}.

И я не понимаю, почему Vuejs, когда я смотрю в Chrome консоли, добавляет немного '0' объекты между каждым слоем данных.

Спасибо за вашу помощь. Я пытался сделать JSfiddle, но он не работал вообще.

Answer 1

Что вы можете сделать, это позволить categories быть объектом:

categories: {
  Atoms: ["Buttons", "Icons"],
  Molecules: [],
  Organisms: [],
  Templates: [],
  Utilities: ["Grid"]
}

И затем использовать Object.entries(categories). Это преобразует объект в двухмерный массив, в котором вы можете обращаться как к имени, так и к значениям во время зацикливания.

Object.entries

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    categories: {
      Atoms: ['Buttons', 'Icons'],
      Molecules: [],
      Organisms: [],
      Templates: [],
      Utilities: ['Grid']
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul v-for="[ category, subCategories ] in Object.entries(categories)" :key="category">
    {{category}}
    <li v-for="subCategory in subCategories" :key="subCategory">
      <div> {{ subCategory }} </div>
    </li>
  </ul>
</div>

[ category, subCategories ] in Object.entries(categories) здесь я использую деструктуризацию массива для непосредственного разложения объекта на отдельную переменную.