vue v-for循环的key值使用经验及采坑总结

必要性:

vue v-for循环时一定要加key值,vue官方也说一定要加,这和vue渲染机制和更新机制有很大关联.不加key的话eslint或vuter也会报错.

 

使用方法:

1.一般可以使用索引充当key值(不涉及节点增删时),不过最好使用数组中的对象中的唯一键作为key.即[{id:xx,...},{id:xxx,...}]中的id作为key.这可避免节点增删时出现数据或其他错误(本人就踩了一次坑,使用了索引导致数据出错)。

或者循环数组自定义一个key值,key='key' + i; 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>