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

Posted 2023-02-22

【中文标题】循环数据对象 Vuejs 以创建菜单

【英文标题】：Loop over data object Vuejs to create a menu

【发布时间】：2020-05-28 07:15:41

【问题描述】：

我正在寻找通过迭代 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，但它根本不起作用。

【参考方案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直接将对象分解成单独的变量。

【讨论】：

它有效，谢谢。但是，仅仅通过正确组织数据对象有什么解决方案吗？

你可以像这样组织categories：categories : [ name : "Atoms", subCategories : ["Buttons", "Icons"] ]