Vue使用v-for获取数据键生成二级菜单异常，求解决方案

问题根源 #

你当前的错误在于：dataKey是遍历menuTxt[localSite]得到的字符串键名（比如"products"、"softwares"），并不是对应的ref数据对象。直接用v-for="itemA in dataKey"会遍历字符串的每个字符，所以得到错误的二级菜单内容。

修正方案 #

步骤1：集中管理菜单数据

把分散的products、softwares ref对象放到一个统一的对象中，这样可以通过dataKey字符串直接匹配对应的数据源：

const localSite = ref('us')

// 集中管理二级菜单数据，这里填入实际的二级菜单内容
const menuData = {
  products: ref({
    product1: 'Cloud Services',
    product2: 'Hardware Solutions'
  }),
  softwares: ref({
    software1: 'Desktop Tools',
    software2: 'Mobile Apps'
  })
}

const menuShow = ref({})

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

步骤2：修正模板中的二级菜单循环

在模板中，通过menuData[dataKey].value访问对应的二级菜单数据（ref对象需通过.value获取值，<script setup>中模板自动解包，但通过对象属性访问时需手动添加）：

<div id="menu-wrapper">
  <div class="flex">
    <div v-for="( item, dataKey ) in menuTxt[localSite]" :key="dataKey" 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"> 
        <!-- 修正：遍历对应dataKey的二级菜单数据 -->
        <p v-for="(subItem, subKey) in menuData[dataKey].value" :key="subKey">{{ subItem }}</p>
      </div>
    </div>
  </div>
</div>

补充说明 #

• 如果二级菜单数据是数组类型，只需把menuData里的ref值改成数组即可，逻辑完全通用。
• 给v-for添加:key属性是Vue的最佳实践，能避免渲染警告。

内容的提问来源于stack exchange，提问作者Joanne Wei