Question

我认为这可能是我偶然发现的一个错误，不确定。我收到了一个组件的Vue.js警告：

vue.js：2611 [Vue警告]：不能使用<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

不确定这是否能解决您的bootstrap问题...但您可以使用<transition>标记包裹内部模板，并为每个模板设置一个键。

请检查这个工作小提琴

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

Answer 2

有用的东西 - 只需使用 div display: contents 作为组件的根，浏览器将忽略该元素并将子元素（可以有很多）视为上层 dom 元素的子元素

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

甚至可以在桌子内使用！

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

2 个答案: