[Vue.js] Vue.extendメソッドが思ったように動作しない

Question

前提・実現したいこと

以下のコードがなぜ動作しないのかを知りたいです。

ExtendFromRootを継承したコンポーネント内のtemplateで、一つの要素しか表示されないのは何故なのでしょうか。

該当のソースコード

コード

Answer 1

Vue.js (現行の2.x系）のcomponentのtemplateのルート要素はひとつだけが許可されます（公式ドキュメント該当箇所）。

// OK
Vue.extend({
  template: `
    <div>Only One Root</div>
  `
})

// NG
Vue.extend({
  template: `
    <div>First Root</div>
    <div>Second Root</div>
  `
})

過去に類似の質問に回答しているので、参考になれば幸いです。

上記の回答では

自分の知る限りVue.js 3系ではtemplate内部でも複数のルート要素を持てるサポートが追加される予定

となっていますが、正式にサポートされます。

---

ちなみに、JSFiddleのページでブラウザのデベロッパーツールを開くと、コンソールにヒントとなるエラーが出ていますよ。

Comments

[tosam1036]

返信が遅くなってしまい、申し訳ございません。
ご回答いただきありがとうございます。

そういうことだったのですか...。
初歩的なこと・類似する内容で質問してしまい、申し訳ないです。

いただいた情報、とても参考になりました。
重ねて感謝します。

[NozomuIkuta]

解決したようでよかったです。

> 初歩的なこと・類似する内容で質問してしまい、申し訳ないです。

「初歩的なこと」
これは特に気にする必要も謝る必要もないと思います。そのためのTeratailだと思うので。

「類似する内容」
Teratailそのものが検索しやすいとは感じませんし、類似の質問をしてもしょうがないと思います。

蛇足ですが、Googleで「vue 複数 ルート」と検索すると、回答の中でリンクした質問が最初に出てきます。
「一つの要素しか表示されない」という現象から連想できるキーワードで検索する習慣があるといいかもしれません（偉そうなことは言えませんが）。

[tosam1036]

温かいお言葉、とても有り難いです。

確かに、ただエラー内容や起きていることをそのまま検索するだけでは不十分ですよね。
今詰まっている部分はどう置き換えられるだろうか、他の人だったらどう表現しているだろうか、と考えを巡らせることはとても重要なことだと感じました。

自己解決力が上がるよう、努力して参ります。

ありがとうございました！