如何解决出现“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>`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。