使用 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()] : []),