解决 Vue 设置了 v-bind:key 但 ESLint 仍报 Custom elements in iteration require 'v-bind:key' directives

发表于 更新于 分类于 ，

这个情况之前就遇到过一次, 今天又碰到了记一下.

直接进入正题, 代码如下:

1
2
3
4
5
<template v-for="item of xxx">
  <Col v-if="item.id !== 3" :span="8" :key="item.id">
    <Checkbox :label="item.id">{{ item.name }}</Checkbox>
  </Col>
</template>

正常情况使用 <template 的时候在子元素下加上 v-bind:key 即可, 但 ESLint 仍然抛出异常, 原因应该跟连续两个组件有关, 时间关系不去追究排查了, 禁用 ESLint 对应规则并不是一个好的选择, 所以在不考虑禁用规则的情况下, 解决办法如下

1
2
3
4
5
<template v-for="item of xxx">
  <Col v-if="item.id !== 3" :span="8" :key="item.id">
    <Checkbox :label="item.id" :key="item.id">{{ item.name }}</Checkbox>
  </Col>
</template>

在子组件上也加上一个 v-bind:key 即可.