vue.js - 使用 vue.js 的模板和根节点的奇怪之处

Question

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

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

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

Answer 1

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

请检查这个工作 fiddle

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