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

问题描述

编辑：不知何故做 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-Elements 的教程中，没有任何问题。但是，我尝试了它并且它有效，但它用红色下划线标出，后来我遇到了一些问题。这是上述问题的描述：

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

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

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

解决方法

在 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标签或使用错误标签造成的。

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

`<template>
    <div><!----this is the main div----->
      <div id="nav"></div>
      <router-view />
    </div>
</template>`

eslint-plugin-vue vue.js