.vue ファイルには template を複数書けないのか
公式ドキュメント を読みながら template
と v-if
を合わせられることを知って以下のように書きました。
Vue の単一ファイルコンポーネントの書き方ですね。
<template v-if="loaded"> ここが表示されるのを待てども...(*˘꒳˘*) </template> <template v-else> いつまでたっても Now Loading...(*˘꒳˘*) </template> <script> // ... </script> <style scoped> </style>
そしたらいつまでも Now Loading...
から描画が遷移しないので、Vue の描画更新のハマりどころを一生懸命調べながら四苦八苦して、ふと後者の template
しか有効でないのではと思い以下のように書き直したら動作するようになりました。
<template> <div> <template v-if="loaded"> ... </template> <template v-else> Now Loading... </template> </div> </template>
若干もっさりした書き方になったのと、div
が不要な場合もあるので、React のような Fragment
が欲しいですね。
this
の扱いでミスしているのか、Observable
への理解が薄いまま変なデータ更新の仕方をしているのかと開発ツールを導入しながら試行錯誤した結果としては、お粗末なハマりどころだったのでした。