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

Question

编辑：通过执行 v-if 和 v-else 语句以某种方式解决了这个问题。尽管如此，有人可以解释如何解决这个问题吗？

摘要：由于模板中存在 2 个元素而发生错误。这没有帮助。我该如何解决这个问题？

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

[vue/no-multiple-template-root] 模板根只需要一个 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>`

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

Problem "vue/no-multiple-template-root" occurs, how do I fix it?

vue.js

eslint-plugin-vue