奇怪的模板和根节点与 vue.js [英] Oddity with templates and root node with vue.js
问题描述
我认为这可能是我偶然发现的一个错误，不确定.我收到一个组件的 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.net/jonmor51/Ldz3k0jp/1/.如果我将所有内容都包装在一个 div 中，它就可以工作.但是没有，它失败了.(不幸的是，在我想使用它的上下文中，即对于 Bootstrap 网格中的内联复选框，用 div 包装会破坏一些东西).
Demo of the problem here: https://jsfiddle.net/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 templates direct children, are they single elements? If so, you can just remove the inner templates 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屋！
