vue使用v-for循环时报错:[vuerequire-v-for-key] Elements in iteration expect to have ‘v-bind:key‘ directives

    科技2022-07-13  131

    <tr v-for="item in Users"> <td>{{item.name}}</td> <td>{{item.password}}</td> <td>{{item.identity}}</td> </tr>

    使用该循环报错 将代码改为:

    <tr v-for="item in Users" :key="item"> <td>{{item.name}}</td> <td>{{item.password}}</td> <td>{{item.identity}}</td> </tr>

    即在v-for循环后加上:key=""。(注意冒号和前面的引号之间加一个空格)。Vue 2.2.0+的版本里,当在组件中使用v-for时,key是必须的 这是修改代码的解决办法 也可以在build处关闭eslint检测 或者更改vetur配置在vscode->首选项->设置->搜索(vetur)将 “vetur.validation.template”: true, 改成:false

    补充: 发现按照第一种方法改代码后浏览器的控制台会报错(因为key值重复导致),虽然不影响运行,但难免有部分同学有强迫症,看着不舒服。 所以可以将代码在修改一下

    <tr v-for="(item,id) in Users" :key='id'> <td>{{item.id}}</td> <td>{{item.username}}</td> <td>{{item.password}}</td> <td>{{item.identity}}</td> </tr>

    这里的id是获取的user对象中的一个属性,因为id是唯一标识的,用它来作为key就不会报错了。

    Processed: 0.012, SQL: 8