- 首页
- 前端开发
- 问题“vue/no-multiple-template-root"发生，我该如何解决?
问题“vue/no-multiple-template-root"发生，我该如何解决?
[英] Problem "vue/no-multiple-template-root" occurs, how do I fix it?
本文介绍了问题“vue/no-multiple-template-root"发生，我该如何解决?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
不知何故做 v-if 和 v-else 语句解决了这个问题.尽管如此，有人可以解释如何解决这个问题吗?
总结:由于模板中存在 2 个元素而发生错误.这个 Vue 3 模板根需要一个 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 模板根只需要一个 element.eslint-plugin-vue.我尝试了提供的解决方案，但没有解决问题.
这是我第一次使用 vue 和 eslint，我是编程初学者.有人可以帮我吗?
解决方案
在 Vue 2 中，一个模板中不允许有多个根节点.
所以这是允许的:
<div><!--- 这是一个根节点--><p>这是内容</p><p>这是更多内容</p>
</模板>
但这是不允许的:
<div><!--- 这是一个根节点--><p>这是内容</p><p>这是更多内容</p>
<div><!-- 错误:这是第二个根节点--><p>.... </p>
</模板>
如果你这样做，你会看到一个白屏，并且在开发者控制台中会出现花里胡哨的声音.
对于具有 v-if、v-else、v-else-if 的根节点，有一个例外.这背后的原因是，在评估这些 if 语句后，将只挂载一个节点.这可能会让新用户感到困惑.
所以，明确地说，这是允许的:
<div v-if=someExpression"><p>情况1</p>
<div v-else-if=somethingElse"><p>其他一些情况</p>
<div v-else><p>其他情况</p>
</模板>
Vue 3 确实允许多个根节点，所以也许你的 eslint 规则仍然是 vue 2 规则.无论哪种方式.对于 Vue，建议始终将整个内容包装在标签中以确保安全.
多个根节点错误通常是由于忘记正确关闭html标签或使用错误标签造成的.
Edit: Somehow doing v-if and v-else statements fixed this. Nonetheless could someone explain how to fix this?
Summary: Error occurs because of 2 Elements present in template. This Vue 3 The template root requires exactly one element.eslint-plugin-vue isn't helping. How do I fix this?
I'm currently following this tutorial (https://www.youtube.com/watch?v=72Fk9i9HcZM&t=830s) to create a Chat with Vue and Firebase. In the tutorial having two div-Elements is working w/o any issues. However, I tried it and it works but it is underlined in red and I ran into some issues later on. This is the Description of said problem:
[vue/no-multiple-template-root]
The template root requires exactly one element.eslint-plugin-vue
I searched for some solutions and found this Vue 3 The template root requires exactly one element.eslint-plugin-vue. I tried the solutions provided but it doesn't solve the Problem.
This is my first time working with vue and eslint and I'm a beginner at programming. Could someone help me please?
解决方案
In Vue 2 it was not allowed to have more than one root node inside a template.
So this was allowed:
<template>
<div> <!--- this is a root node -->
<p>This is content</p>
<p>This is more content</p>
</div>
</template>
But this is not allowed:
<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>
You get a white screen and bells and whistles will go off in Developer Console if you do that.
There was one exception though for root nodes that have v-if, v-else, v-else-if. The reasoning behind this is that, after evaluating these if statements there will be one only node that is mounted. This may be confusing to new users.
So, to make it clear, this is allowed:
<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 does allow muliple root nodes, so maybe your eslint rules are still vue 2 rules. Either way. For Vue it was recommended to always wrap the entire thing in tags just to be sure.
Multiple root node errors are often caused by forgetting to properly close html tags, or use the wrong ones.
这篇关于问题“vue/no-multiple-template-root"发生，我该如何解决?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
