奇怪的模板和根節點與vue.js

我認爲這可能是一個我偶然發現的錯誤，不知道。我得到這個Vue.js一個組件警告：奇怪的模板和根節點與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中會破壞事物）。

來源

2016-12-02 John Moore

內template的直接孩子，他們是單一的要素是什麼？如果是這樣，您可以刪除內部template s並將v-if移動到label。

或者，只需使用span而不是div作爲您的快速修復程序，它不會破壞內聯元素的樣式。

來源

2016-12-03 05:29:54

你是對的，這很有趣。如果我將v-if和v-else移動到包含的元素中，即使表面上存在相同的情況（即，兩個替代根元素，這次不是模板），也沒有問題。所以它似乎只是導致問題的模板。 https://jsfiddle.net/jonmor51/Ldz3k0jp/3/ –

@JohnMoore我實際上沒有嘗試過，當我建議刪除'模板'...所以事實證明，vue可以正確地判斷是否會有使用'v-if'時的一個根元素。而'template'只是不允許作爲root用戶，vue直行並給出警告，而不分析最終將呈現的內容。 –

不知道這是否會解決您的問題與自舉...但你可以用<transition>標籤包裹你的內部模板，併爲每個標籤設置一個鍵。

請檢查該工作小提琴

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

來源

2016-12-02 22:34:10 AldoRomo88

是的，這似乎很好地完成了這項工作。它也沒有'鑰匙'，所以爲什麼'鑰匙'是必要的？即使它有一點點混亂感（這不是什麼轉變），我可能會繼續這樣做，但它至少讓我感動！ –

但是，我收到了警告，但轉換無法與列表一起使用。 ;-)在我看來，vue.js開發者正確地搞砸了一些東西。 – Drachenfels

奇怪的模板和根節點與vue.js

回答

相關問題