迭代中的错误元素期望有 'v-bind:key' 指令 vue/require-v-for-key答案

【问题标题】：error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key迭代中的错误元素期望有 'v-bind:key' 指令 vue/require-v-for-key
【发布时间】：2021-03-26 13:15:18
【问题描述】：

我完全是 Vue 的初学者。由于我正在学习创建商业产品页面，因此我跟随导师编写代码。教程完成后，导师可以成功打开他创建的演示页面。当我尝试做 npm run serve 时。我收到了这样的错误：迭代中的错误元素期望有 'v-bind:key' 指令 vue/require-v-for-key。

这是一段代码，VS代码指出的一些问题：

  <div 
    v-for = "product in products"
    class = "product-item"
    v-bind: key = "product.id"
  >

我不知道在哪里添加 VS 代码告诉这样做的 v-bind:key。

【问题讨论】：

标签： vue.js

【解决方案1】：

您需要删除 'v-bind:' 和 key 属性之间的空格。所以最终的代码应该是这样的：

<div 
v-for = "product in products"
class = "product-item"
v-bind:key = "product.id"
>

【讨论】：