时间戳

首页 > 解决方案 > Vue v3 预期的 'v-bind:key' 指令使用由 'v-for' 指令定义的变量

vue.js - Vue v3 预期的 'v-bind:key' 指令使用由 'v-for' 指令定义的变量

问题描述

编辑：我用括号修复了这个错误，将 v-for 更改为v-for="(color, index) in global.base_colors"

我正在开发我的第一个 Vue (v3) 应用程序，用于学习目的。

作为一个单页，使用Vue.createApp()，它工作正常，但我一直在迁移它。

我一直收到这个错误

for(let color, index in global.base_colors);
    |                      ^  vue/no-parsing-error
226:60  error  Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive

从这段代码

<span v-for="color, index in global.base_colors" v-bind:key="color">
  <input type="checkbox" :id="'inColor'+index" name="inColors" :value="color.toLowerCase()" class="gui"><label :for="'inColor'+index" :style="'border-left-color: '+color.toLowerCase()+'; background-color: '+color.toLowerCase()">{{color}}</label>
</span>

我site.global.base_colors的一个简单的字符串数组['red','blue','green']

有趣的是，代码有效。我可以看到颜色列表正在呈现的错误覆盖背后。

当我为此谷歌搜索时，我得到的页面是Elements in iteration expect to have 'v-bind:key' directives

标签： vue.js

解决方案

我用括号修复了这个错误，将 v-for 更改为v-for="(color, index) in global.base_colors".

推荐阅读