書いたコード概要とエラー
私が開発していた箇所では、HTML内のテンプレート・コンポーネントを作成するJavascriptに分けてVueコンポーネントのコードを記述していました。
HTML
<script id="someComponent" type="text/x-template">
<div>
...
</div>
</script>
Javascript
Vue.component('some-component', {
// ...
template: 'someComponent'
});
前例に倣ったつもりでこのように書いたところ、該当のコンポーネントを表示させる処理を実行した時、想定していた要素が表示されず、代わりにコンソールにエラーが出力されました。
エラー
[Vue warn]: Error compiling template:
someComponent
- Component template requires a root element, rather than just text.
原因
エラーメッセージだけ見て不可解に思っていましたが、処理的にはid="someComponent"
となっている要素を読み込むのではなく、someComponent
という文字列をテンプレートとして解釈しようとしていたことが分かりました。気づいてみれば当然といえば当然ですね……。
修正後
Javascript
Vue.component('some-component', {
// ...
template: '#someComponent'
});
このように書くことで、無事id="someComponent"
となっている要素の内容をコンポーネントとして読み出し、表示することができました。