2016-11-04 16 views
3

私はこれについて何も見なかったかもしれませんが、十分に検索しなかったかもしれませんが、コンポーネントテンプレートはルート要素で "より良く"機能するようです(より良い手段:Laravel elixirがルート要素なしで動作し、gulpを実行していますがgulp --productionディスプレイ最初の要素のみ)。Vuejsコンポーネントテンプレートはルート要素を1つだけ必要としますか?

<template>の中にルート要素が1つだけある必要がありますか?

つまり、このテンプレートコードはVue 2で使用できますか? [ヴューが警告]

そして唯一のショー:コンポーネントテンプレートは、1つのルート要素が含まれている必要があり

<template> 
    <div>A</div> 
    <div>B</div> 
</template> 

答えて

8

すべてのコンポーネントには、正確に1つのルート要素が必要です。フラグメントインスタンスはもはや許可されません。このように、単に新しい要素で全体の内容をラップすることをお勧めします

<p>foo</p> 
<p>bar</p> 

<div> 
    <p>foo</p> 
    <p>bar</p> 
</div> 

VueJS Docs

4

それはコンパイルかもしれないが、Vueが次の警告があなたをスローしますテンプレートの最初の要素ですので、テンプレートを1つのルートレベルのタグで囲むようにしてください。

<template> 
    <div> 
    <div>A</div> 
    <div>B</div> 
    </div> 
</template> 

次JSFiddleに開発者用ツールのコンソールを見るとあなたは私が何を意味するかが表示されるはずです。

https://jsfiddle.net/woLwz98n/

私も、私はすべての時間、それを使用し、ごlaravel-log-viewerのためにあなたに感謝するチャンスを取りますよそれは素晴らしいです!

2

はい、それがVueの2.0のために必要であるあなたは、このようなテンプレートを使用している場合単一のルート要素を持つテンプレート。 親divを作成し、その中にすべてのコンポーネントdivを配置するだけです。私はそれが他の誰かを助けることとして、私はちょうど私の2セントを追加しようと思いました、の回答にさらに
https://github.com/vuejs/vue-loader/issues/384

1

<template> 
    <div> 
    <div>A</div> 
    <div>B</div> 
    </div> 
</template> 

Vue.js作成者は、この記事では同じ言及しています。私はテーブル行の子コンポーネントを持っていましたが、上記の解決策を試してテーブル行の周りにラッピングdivを置いていましたが、親コンポーネントがラップを必要とする部分であることがわかったのですが、子ではありません&問題は解決しました。したがって、このエラーに遭遇する親子コンポーネントの状況にある場合は、親テンプレートコードの周りにdivを囲みます。

関連する問題