【今日のハマり処】コンポーネントのテンプレートをnew Vue のルートに入れて `Property is not defined on the instance.`

別々のページで開発していた機能を一つのファイルにまとめることとして、そのままだと全部のページで 他サービスのAPIにGETリクエストを投げてしまうからそこをコンポーネントに切り分けて、必要なときだけリクエストを投げるようにした……まではよかったんだけど、描画されない。


コンソール見てみると、

Property or method “displayDate” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

と怒られている模様。displayDateがインスタンスに見つからないよ、といわれているんだけど、コンポーネントで確かに定義してるし、リアクティブになるように処理もしてる。で、これをコンポーネントではなくてnew Vue直下のルートのdataで定義するとエラーは出ない。

意味が解らなくてしばらくハマっていたんだけど、気を取り直してこちらのサイトをイチから読んでたら最後の項目に書いてありました。

new Vueでマウントしている要素（ルート）の中にテンプレートファイルをいれない

コンポーネントのテンプレートを、script[type=text/x-template]で指定している場合、割とやりがちなミスだったりします。

以下、うまくいかない例です。 これを実行すると、ReferenceError: text is not defined と怒られます。

初心者向：Vue.js コンポーネント作成がうまくいかないときにチェックする5つのこと – Qiita

これだーーーー



「ちょっと試してみよう」と思って、挿入する場所のスグしたの行にテンプレートを書いてたんですけど、たしかにそれ、ルートの中だわ。

こうじゃなくて、

<article>
{{ displayDate }}
<script>
</script>
</article>

こう。

<article>
{{ displayDate }}
</article>
<script>
</script>

そりゃVueにしてみれば、displayDateがどこの値かはわからないよね。

わかってみれば当たり前のことなんだけど、初心者はやりがちなんだろうなあ。解決して良かった。