vue.jsで初学者がハマったことメモ

ハマったことをメモ。
初学者はこんなところでハマります。

templateの書き方

templateの中は必ず階層構造にしないと最初の要素以外無視される。

template

× ダメ絶対
<div id="hoge"></div>
<div id="foo"></div>

◯ OK.
<div id="hoge">
  <div id="foo"></div>
</div>

v-bind:class

-(ハイフン)含みのclassは、'(シングルクォート)で囲まないとNG.
- invalid expression: Unexpected token - inがでるらしい。
（codepenでは沈黙のエラーだったのでハマった）
※v-bindは省略可

template

× ダメ絶対
<div v-bind:class="{class-A: isActiveA}"></div>

◯ OK.
<div v-bind:class="{'class-A': isActiveA}"></div>