Vue3内置Fragment实现无包裹元素v-for的ESLint报错解决咨询

要解决这个问题，核心是理清Vue3内置Fragment（多根模板）与ESLint规则的冲突，以下是两种可行方案：

方案1：关闭ESLint的vue/no-multiple-template-root规则 #

Vue3原生支持多根模板，不需要再写<fragment>标签，直接把v-for放在根<template>上即可，但ESLint默认的vue/no-multiple-template-root规则会阻止这种写法（因为循环展开后会生成多个根元素）。

修改你的ESLint配置文件（比如.eslintrc.js），禁用该规则：

module.exports = {
  // 其他配置项...
  rules: {
    'vue/no-multiple-template-root': 'off'
  }
}

之后就能直接写无包裹的循环代码：

<template v-for="id in ids" :key="id">
  <div class="1"></div>
  <div class="2"></div>
</template>

方案2：用隐形根容器包裹（不影响最终DOM结构） #

如果不想修改ESLint规则，可以用外层<template>作为语法容器（不会渲染成真实DOM），把v-for放在内部的<template>上：

<template>
  <template v-for="id in ids" :key="id">
    <div class="1"></div>
    <div class="2"></div>
  </template>
</template>

这种写法既符合ESLint对单根节点的要求，又能实现无包裹的循环效果，最终渲染出的DOM结构和Vue2中用<fragment>的结果完全一致。

补充说明 #

Vue3的内置Fragment本质就是原生支持多根模板，功能和vue-fragment完全等价，你遇到的问题只是ESLint规则的限制，而非框架本身能力不足。

内容的提问来源于stack exchange，提问作者Morco