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子菜单（每个数组中的字符串）来获得一个干净的列表。。现在，我得到了屏幕上的所有数组，分别是[]和{}。

我不理解为什么当我在Chrome控制台中查看Vuejs时，会在每层数据之间添加一些“ 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直接将对象分解为单独的变量。

遍历数据对象Vuejs以创建菜单

1 个答案: