vue 使用 v-for 时 vscode 报错 Elements in iteration expect to have 'v-bind:key' directives

Vue2.2.0 + 的版本里,当在组件中使用 v-for 时,key 是必须的

错误提示:

[vue-language-server] Elements in iteration expect to have 'v-bind:key' directives.
Renders the element or template block multiple times based on the source data

原因是 eslint 检测引起

解决方法:

  1. 在 v-for 后添加:key='item'

    <li v-for="i in list" :key="i">
    <div class="item" v-for="(user,index) in datalist" :key='index' >
  2. 在 build 处关闭 eslint 检测
    ...(config.dev.useEslint ? [createLintingRule ()] : []),

  3. 更改 vetur 配置:vscode-> 首选项 -> 设置 -> 搜索(vetur)
    "vetur.validation.template": true, 改成:false

参考链接:

vue 使用 v-for 时 vscode 报错 Elements in iteration expect to have 'v-bind:key' directives