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

Question

编辑：不知何故做 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，我是编程的初学者。有人可以帮帮我吗？

Answer 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标签，或者使用了错误的标签。

Answer 2

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

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