模板和根节点与vue.js的奇怪

Question

我想这可能是我偶然发现的一个错误,不确定.我收到一个组件的Vue.js警告:

vue.js:2611 [Vue warn]:不能<template>用作组件根元素,因为它可能包含多个节点:

问题似乎是这样的:

<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 - 如果其中一个节点存在,则另一个节点在逻辑上不可能.

这里的问题演示:https://jsfiddle.net/jonmor51/Ldz3k0jp/1/.如果我将所有内容都包装在div中,它就可以了.但没有,它失败了.(不幸的是,在我想要使用它的上下文中,即对于Bootstrap网格中的内联复选框,包装div会破坏事物).

Answer 1

不确定这是否会解决引导程序的问题……但是您可以用<transition>标签包装内部模板并为每个模板设置一个键。

请检查这个工作小提琴

https://jsfiddle.net/AldoRomo88/7c7znu3p/

Answer 2

有用的事情 - 只需使用div 显示：内容作为组件的根，浏览器将忽略该元素并将子元素（可以有很多）视为上层 dom 元素的子元素

    <div style="display: contents">
        <template v-if="...">
            <template v-for="..."> ...
        </template>
        <template v-if="...">
        </template>
    </div  

即使在桌子内部也能工作！

Answer 3

内部template的直接子元素，它们是单个元素吗？如果是这样，您可以删除内部templates 并移动v-if到label.

或者，只需使用span而不是div作为快速修复，这不会破坏内联元素的样式。