Vue项目tr、tbody元素v-for属性验证错误的修复咨询

是否需要修复？ #

• 从项目运行角度看，这两个写法完全不影响Vue的功能，Vue本身支持在<tr>和<tbody>上使用v-for渲染列表。
• 但如果你的开发流程有严格的代码校验要求（比如团队规范必须过W3C HTML校验、或者使用的检查工具会抛出错误阻断流程），那建议修复，避免这类无意义的告警干扰开发。

具体修复方法 #

修复<tr>上的v-for错误 #

把v-for转移到Vue的<template>占位标签上，因为<template>不会被渲染成真实DOM，既能实现列表渲染，又能绕过HTML校验的限制：

原错误代码示例：

<tbody>
  <tr v-for="item in dataList" :key="item.id">
    <td>{{ item.name }}</td>
  </tr>
</tbody>

修改后：

<tbody>
  <template v-for="item in dataList" :key="item.id">
    <tr>
      <td>{{ item.name }}</td>
    </tr>
  </template>
</tbody>

修复<tbody>上的v-for错误 #

同样用<template>包裹<tbody>，把v-for放到<template>上：

原错误代码示例：

<table>
  <tbody v-for="group in groupList" :key="group.id">
    <tr><th>{{ group.title }}</th></tr>
    <tr v-for="item in group.items" :key="item.id">
      <td>{{ item.content }}</td>
    </tr>
  </tbody>
</table>

修改后：

<table>
  <template v-for="group in groupList" :key="group.id">
    <tbody>
      <tr><th>{{ group.title }}</th></tr>
      <tr v-for="item in group.items" :key="item.id">
        <td>{{ item.content }}</td>
      </tr>
    </tbody>
  </template>
</table>

替代方案：关闭不必要的校验规则 #

如果只是校验工具的告警，不想改代码，可以调整校验配置：

• 若用ESLint+vue-eslint-plugin，在项目的.eslintrc.js里添加规则，忽略这类HTML属性校验：

module.exports = {
  rules: {
    // 根据实际告警规则调整，关闭不必要的HTML属性校验
    'vue/valid-template-root': 'off',
  }
}

• 若用HTMLHint这类工具，在配置文件里添加允许v-for属性的规则。

内容的提问来源于stack exchange，提问作者Xu Shuo ze