循环数据对象 Vuejs 以创建菜单

Question

我正在寻找通过迭代 Vuejs 数据对象中的嵌套对象来创建菜单。

这是我想到的循环：

<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(){}。

我知道这是一个简单的问题，但我无法获得一个干净的列表，其中菜单（原子、分子...）作为 ul，子菜单（每个数组中的字符串）作为 li . 现在，我在屏幕上看到了 all 数组，带有 [] 和 {}。

我不明白为什么 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)这里我使用array destructuring直接将对象分解成单独的变量。