きみはねこみたいなにゃんにゃんなまほう

ねこもスクリプトをかくなり

.vue ファイルには template を複数書けないのか

公式ドキュメント を読みながら templatev-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 への理解が薄いまま変なデータ更新の仕方をしているのかと開発ツールを導入しながら試行錯誤した結果としては、お粗末なハマりどころだったのでした。