Vue : Custom elements in iteration require 'v-bind:key' directives.

使用 element-ui 去遍历路由做侧边栏，eslint 检测出现一个错误 ??

Vue : Custom elements in iteration require ‘v-bind:key’ directives.

<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"><el-submenu :index="index+''" v-if="!item.leaf"><template slot="title"><i :class="item.iconCls"></i>{
   {item.name}}</template><el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{
   {child.name}}</el-menu-item></el-submenu><el-menu-item v-if="item.leaf && item.children.length > 0" :index="item.children[0].path"><i :class="item.iconCls"></i>{
   {item.children[0].name}}</el-menu-item>
</template>

警告 ??

Custom elements in iteration require 'v-bind:key' directives.

大白话，自定义元素需要一个 v-key : value 指令。
?? 注意上面 key 值不要用对象或是数组作为 key ，用 string 或 number 作为key，否则报错：[Vue warn] Avoid using non-primitive value as key, use string/number value instead.

将代码修改为：

<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"><el-submenu :index="index+''" v-if="!item.leaf" :key="item.name"><template slot="title"><i :class="item.iconCls"></i>{
   {item.name}}</template><el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{
   {child.name}}</el-menu-item></el-submenu><el-menu-item v-if="item.leaf && item.children.length > 0" :index="item.children[0].path" :key="item.name"><i :class="item.iconCls"></i>{
   {item.children[0].name}}</el-menu-item></template>

错误消失。

关闭Eslint检测

在 build 处关闭 eslint 检测

...(config.dev.useEslint ? [createLintingRule()] : []),