permission.js:130 [Vue warn]: Duplicate keys detected: '[object Object]'. This m

错误解释

这个警告通常是由于在Vue的模板中使用了重复的key属性导致的。在你的代码中，你使用:key="menuItem.menuId"来指定key，但有可能menuItem.menuId的值为空或者不唯一，从而引发了这个警告。

错误复现

<template>
  <div>
    <!-- 导航栏 -->
    <div class="home-menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#409EFF"
        text-color="#FFFFFB"
        active-text-color="orange"
      >
        <template v-for="(menuItem, index) in menuList">
          <template v-if="menuItem.children && menuItem.children.length > 0">
            <el-submenu :index="menuItem.path" :key="'submenu_' + (menuItem.menuId || index)">
              <template slot="title">{{ menuItem.menuName }}</template>
              <!-- 递归调用以生成子菜单项 -->
              <template v-for="(subMenuItem, subIndex) in menuItem.children">
                <template v-if="subMenuItem.children && subMenuItem.children.length > 0">
                  <el-submenu :index="subMenuItem.path" :key="'submenu_' + (subMenuItem.menuId || subIndex)">
                    <template slot="title">{{ subMenuItem.menuName }}</template>
                    <!-- 递归调用以生成多个级别的子菜单项 -->
                    <template v-for="(nestedMenuItem, nestedIndex) in subMenuItem.children">
                      <el-menu-item :index="nestedMenuItem.path" :key="'menuitem_' + (nestedMenuItem.menuId || nestedIndex)">
                        {{ nestedMenuItem.menuName }}
                      </el-menu-item>
                    </template>
                  </el-submenu>
                </template>
                <template v-else>
                  <el-menu-item :index="subMenuItem.path" :key="'menuitem_' + (subMenuItem.menuId || subIndex)">
                    {{ subMenuItem.menuName }}
                  </el-menu-item>
                </template>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="menuItem.path" :key="'menuitem_' + (menuItem.menuId || index)">
              {{ menuItem.menuName }}
            </el-menu-item>
          </template>
        </template>
        <el-menu-item index="about">关于我们</el-menu-item>
      </el-menu>
    </div>
    <!-- 轮播图 -->
    <el-carousel :interval="4000" type="card" >
      <el-carousel-item v-for="(item, index) in carouselItems" :key="'carouselItem_' + index">
        <img :src="item.imageUrl" style="width:100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

错误解决

为了避免重复key的警告，你可以尝试将menuId和其它信息结合在一起作为key。如果menuId可能为空，你还可以使用索引（index）作为附加信息来确保唯一性。

以下是修改过的代码：

<template>
  <div>
    <!-- 导航栏 -->
    <div class="home-menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#409EFF"
        text-color="#FFFFFB"
        active-text-color="orange"
      >
        <template v-for="(menuItem, index) in menuList">
          <template v-if="menuItem.children && menuItem.children.length > 0">
            <el-submenu :index="menuItem.path" :key="'submenu_' + (menuItem.menuId || index)">
              <template slot="title">{{ menuItem.menuName }}</template>
              <!-- 递归调用以生成子菜单项 -->
              <template v-for="(subMenuItem, subIndex) in menuItem.children">
                <template v-if="subMenuItem.children && subMenuItem.children.length > 0">
                  <el-submenu :index="subMenuItem.path" :key="'submenu_' + (subMenuItem.menuId || subIndex)">
                    <template slot="title">{{ subMenuItem.menuName }}</template>
                    <!-- 递归调用以生成多个级别的子菜单项 -->
                    <template v-for="(nestedMenuItem, nestedIndex) in subMenuItem.children">
                      <el-menu-item :index="nestedMenuItem.path" :key="'menuitem_' + (nestedMenuItem.menuId || nestedIndex)">
                        {{ nestedMenuItem.menuName }}
                      </el-menu-item>
                    </template>
                  </el-submenu>
                </template>
                <template v-else>
                  <el-menu-item :index="subMenuItem.path" :key="'menuitem_' + (subMenuItem.menuId || subIndex)">
                    {{ subMenuItem.menuName }}
                  </el-menu-item>
                </template>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="menuItem.path" :key="'menuitem_' + (menuItem.menuId || index)">
              {{ menuItem.menuName }}
            </el-menu-item>
          </template>
        </template>
        <el-menu-item index="about">关于我们</el-menu-item>
      </el-menu>
    </div>
    <!-- 轮播图 -->
    <el-carousel :interval="4000" type="card" >
      <el-carousel-item v-for="(item, index) in carouselItems" :key="'carouselItem_' + index">
        <img :src="item.imageUrl" style="width:100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<!-- 其它部分保持不变 -->

在这里，我使用了字符串拼接来创建唯一的key，确保了每个menuId都会附加在相应的key之后，以避免重复。同样，对于轮播图的el-carousel-item，我使用了索引作为附加信息来确保唯一性。