Vue.js 复合物上的预期v-bind指令<；模板>；/v-for

我在我的组件中尝试了一个复杂的循环，遇到了一个奇怪的问题

<template v-for="(scorecard, scorecardIndex) in scorecards">
    <template v-for="(property, propertyIndex) in properties">
        <!-- Primary player -->
        <tr v-if="scorecardIndex === 0"
            v-bind:key="propertyIndex"> // THIS LINE
        </tr>
    </template>

    <!-- Secondary players, should only show score -->
    <tr v-if="scorecardIndex > 0"
        v-bind:key="scorecardIndex">    
    </tr>
</template>

//这条线

在这里，我设置了

v-bind:key=“propertyIndex”

我在VSCode中得到了以下错误

[vue/valid-v-for] 应使用“v-bind:key”指令使用“v-for”指令定义的变量

---

奇怪的是，我并没有在vue编译器上发现错误，只是在VSE代码中。这使我认为它与VSCode直接相关，而不一定与Vue本身有关。

您从eslint收到此错误，它检查您的代码是否存在可能的错误和糟糕的编码风格

在

上使用

v-for

时，需要确保在

中的每个顶级元素上定义

键。这是因为
不是实际的DOM元素（在Vue模板中），因此其中的每个元素将在DOM中的同一级别重复，这就是为什么在该DOM树级别的每个元素上都需要
键

您有一个嵌套的
，每个都使用
v-for
，因此它变得有点复杂。您需要确保第一个
的键使用由
v-for
s定义的变量。尽管在您的特定情况下，您使用
v-if
将要创建的元素限制为仅第一行，因此eslint在这里过于迂腐。您可以按如下方式使警告静音：



但我认为你的顺序不对。首先检查它是否是第一行，然后重复一系列的
s，而不是以相反的方式：



最后，您将得到一些重复的键警告，因为两组
都将使用键0、1、2等等。也许可以给它们加前缀：


这似乎是一个eslint插件问题。你使用它吗？bind:键不应该和v-for在同一个标签中吗？？？？