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

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/Ruffaim/article/details/83784818

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