问题描述
限时送ChatGPT账号..我认为这可能是我偶然发现的一个错误,不确定.我收到一个组件的 Vue.js 警告:
I think this is possibly a bug I've stumbled across, not sure. I'm getting this Vue.js warning for a component:
vue.js:2611 [Vue 警告]:不能使用 作为组件根元素,因为它可能包含多个节点:
vue.js:2611 [Vue warn]: Cannot use
<template>
as component root element because it may contain multiple nodes:
问题似乎是这样的:
<template id="tpl-field">
<template v-if="fieldType==='checkbox-inline'">
<label class="checkbox-inline">[SNIP]</label>
</template>
<template v-else>
[SNIP]
</template>
</template>
所以我有两个模板节点,这似乎是它阻塞的多个节点(当然每个模板节点只包含一个节点).然而,这是 Vue 中的 if-else - 如果其中一个节点存在,则另一个节点在逻辑上不存在.
So I have two template nodes, which seems to be the multiple nodes it's choking on (certainly each of the template nodes contains just a single node). Yet this is an if-else in Vue - if one of the nodes is present, the other logically cannot be.
问题的演示:https://jsfiddle/jonmor51/Ldz3k0jp/1/.如果我将所有内容都包装在一个 div 中,它就可以工作.但是没有,它失败了.(不幸的是,在我想使用它的上下文中,即对于 Bootstrap 网格中的内联复选框,用 div 包装会破坏一些东西).
Demo of the problem here: https://jsfiddle/jonmor51/Ldz3k0jp/1/. If I wrap everything in a div, it works. But without, it fails. (Unfortunately, in the context where I want to use this, namely for inline checkboxes within a Bootstrap grid, wrapping in a div breaks things).
推荐答案
内部 template
的直接子元素,它们是单个元素吗?如果是这样,您只需删除内部 template
并将 v-if
移动到 label
.
The inner template
s direct children, are they single elements? If so, you can just remove the inner template
s and move v-if
to the label
.
或者,使用 span
而不是 div
作为快速修复,这不会破坏内联元素的样式.
Or, just use span
rather than div
as your quick fix, which won't break inline elements' style.
这篇关于奇怪的模板和根节点与 vue.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论