出现问题“vue/no-multiple-template-root”，我该如何解决？

Posted 2023-02-23

【中文标题】出现问题“vue/no-multiple-template-root”，我该如何解决？

【英文标题】：Problem "vue/no-multiple-template-root" occurs, how do I fix it?

【发布时间】：2021-04-12 13:23:17

【问题描述】：

编辑：不知何故做 v-if 和 v-else 语句解决了这个问题。尽管如此，有人可以解释如何解决这个问题吗？

总结：由于模板中存在 2 个元素而发生错误。这个Vue 3 The template root requires exactly one element.eslint-plugin-vue 没有帮助。我该如何解决这个问题？

我目前正在关注本教程 (https://www.youtube.com/watch?v=72Fk9i9HcZM&t=830s) 以使用 Vue 和 Firebase 创建聊天。在本教程中，有两个 div 元素的工作没有任何问题。但是，我尝试了它并且它可以工作，但是它带有红色下划线，后来我遇到了一些问题。这是所述问题的描述：

[vue/no-multiple-template-root] 模板根需要一个 element.eslint-plugin-vue

我搜索了一些解决方案，发现了这个Vue 3 The template root requires exactly one element.eslint-plugin-vue。我尝试了提供的解决方案，但没有解决问题。

这是我第一次使用 vue 和 eslint，我是编程的初学者。有人可以帮帮我吗？

【问题讨论】：

请注意，即使对于经验丰富的程序员来说，使用 Vuex 和 Firebase 构建聊天应用程序也很困难。我看到您已经为自己设置了整个开发堆栈（webpack/vue-cli/eslint），这些都是复杂的工具，需要大量时间才能真正掌握。我强烈建议在没有外部工具的情况下在常规 html 文档中使用 Vue，了解 Vue 应用程序的构建块，了解 Vue 的乐趣。祝你旅途愉快！

在 VSCode 中对我有用的是什么***.com/a/64901711/1821558

【参考方案1】：

在 Vue 2 中，模板中不允许有多个根节点。

所以这是允许的：

<template>
   <div> <!--- this is a root node -->
       <p>This is content</p>
       <p>This is more content</p>
   </div>
</template>

但这是不允许的：

<template>
   <div> <!--- this is a root node -->
       <p>This is content</p>
       <p>This is more content</p>
   </div>
   <div> <!-- error: this is a second root node -->
      <p> .... </p>
   </div>
</template>

如果你这样做，你会得到一个白屏，并且开发者控制台中的花里胡哨会响起。

但是对于具有 v-if、v-else、v-else-if 的根节点有一个例外。这背后的原因是，在评估了这些 if 语句之后，将仅安装一个节点。这可能会让新用户感到困惑。

所以，为了清楚起见，这是允许的：

<template>
   <div v-if="someExpression">
      <p>Case 1</p>
   </div>
   <div v-else-if="somethingElse">
     <p>Some other case</p>
   </div>
   <div v-else>
     <p>Else case</p>
   </div>
</template>

Vue 3 确实允许多个根节点，所以也许你的 eslint 规则仍然是 vue 2 规则。无论哪种方式。对于 Vue，建议始终将整个内容包装在标签中以确保安全。

多个根节点错误往往是由于忘记正确关闭html标签，或者使用了错误的标签。

【讨论】：

非常感谢。这解释了它

【参考方案2】：

最简单和最ingenious 的方式是将所有代码包装在一个父 div 中。

`<template>
    <div class="main-div>
      *<!--------all your code should be in here------->*
    </div>
</template>`