本文主要是介绍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()] : []),
这篇关于Vue : Custom elements in iteration require 'v-bind:key' directives.的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
