テンプレートとvue.jsを使ったルートノードの奇妙さ

Question

これはおそらく私が偶然見つけたバグだと思います。私は、これはコンポーネントの警告Vue.js取得しています：

vue.js：2611 [ヴューが警告]：それは複数のノードが含まれている可能性があるため、コンポーネントのルート要素として<template>を使用することはできません：

だから私は（確かにテンプレートノードのそれぞれが1つだけのノードが含まれている）、それは上の窒息だ複数のノードであるように思われ、2つのテンプレートノードを持つ

<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です。ノードの1つが存在する場合、他のノードは論理的には存在できません。

ここの問題のデモ：https://jsfiddle.net/jonmor51/Ldz3k0jp/1/。私がdiv内のすべてをラップすると、動作します。しかし、それがなければ、それは失敗する。 （残念なことに、私がこれを使用したいコンテキスト、すなわちBootstrapグリッド内のインラインチェックボックスの場合、divの折り返しが問題を壊します）。

Answer 1

インナーtemplateの直接の子を確認してください、彼らは、単一の要素ですか？その場合は、内部のtemplateを削除し、v-ifをlabelに移動してください。

またはdivではなく、を使用してください。これにより、インライン要素のスタイルが損なわれません。

Answer 2

これがブートストラップの問題を解決するかどうかはわかりませんが、内部テンプレートを<transition>タグで囲み、それぞれにキーを設定することができます。

この作業フィドル

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