必要性:
vue v-for循环时一定要加key值,vue官方也说一定要加,这和vue渲染机制和更新机制有很大关联.不加key的话eslint或vuter也会报错.
使用方法:
1.一般可以使用索引充当key值(不涉及节点增删时),不过最好使用数组中的对象中的唯一键作为key.即[{id:xx,...},{id:xxx,...}]中的id作为key.这可避免节点增删时出现数据或其他错误(本人就踩了一次坑,使用了索引导致数据出错)。
或者循环数组自定义一个key值,key='key' + i++
2.使用template作为循环语句的元素时,key值添加在template内的第一级子元素上.例如:
<template v-for="item in routers"><el-submenu :index="item.path" v-if="item.children&&item.children.length" :key="item.path"><template slot="title"><i class="icon iconfont" :class="item.meta.icon"></i><span>{{item.meta.title}}</span></template><el-menu-item:index="val.path":route="val.path"v-for="val in item.children":key="val.name"><template slot="title"><span>{{val.meta.title}}</span></template></el-menu-item></el-submenu><el-menu-item :index="item.path" :route="item.path" v-else :key="item.path"><template slot="title"><i class="icon iconfont" :class="item.meta.icon"></i><span>{{item.meta.title}}</span></template></el-menu-item></template>