我尝试使用 v-for 获取数据密钥答案

【问题标题】：I try to use v-for to get the data key我尝试使用 v-for 获取数据密钥
【发布时间】：2022-12-13 03:24:56
【问题描述】：

例如标题，我尝试创建一个菜单，我使用 v-for 来获取数组项和键。然后我需要按键来创建第二层菜单。

const localSite = ref('us')

const products = ref({})
const softwares = ref({})

const menuShow = ref({})


const menuTxt = ref({
  "us": {
    "products": "Products",
    "softwares": "Software"
  }
})

<div id="menu-wrapper">

        <div class="flex">
          <div v-for="( item, dataKey ) in menuTxt[localSite]" class="menu-item">
            <button class="text-white" :data-category="dataKey" @click="slideDown(dataKey)">
              {{ item }} 
              <font-awesome-icon icon="angle-down" />
            </button>

            <div class="text-box menu-content"> 
              <p v-for="itemA in dataKey">{{itemA}}</p>
            </div>
          </div>
        </div>
      </div>

我认为 'dataKey' 是一个变量，它是 vue 数据对象。但我总是会得到错误的结果。我该怎么办？

【问题讨论】：

迭代对象有点棘手，我建议使用数组并将键添加为属性。另一种选择是使用地图：designcise.com/web/tutorial/how-to-iterate-over-a-map-in-vuejs

标签： vuejs3 v-for

【解决方案1】：

如果我正确理解您的问题，您正试图通过使用模板中的dataKey 来访问products 和softwares 属性。这是不可能的，因为它指的是 menuTxt 的密钥。

我做了一个StackBlitz来展示一种不同的方法。在同一对象中定义子菜单项及其父项。这也使它更具可读性。

【讨论】：