vue.js でつまづいた話 (1)

Elasticsearch に引き続き vue.js でつまづいた話。続くかどうかはわからない。

---

v-bind で、バインドする内容を動的に切り替えたいときの話。

公式ドキュメント のとおり、 v-bind:class では以下のように記述すると isActive や hasError の真偽値でバインドの有無が切り替えられる。

<div v-bind:class="{ active: isActive, 'text-danger': hasError }">
    ...
</div>

これは v-bind:style の場合も同様。

ところが、例えばカスタムデータ属性などではうまくいかない。

<div v-bind:data-type="{ 'hoge': isHoge }">
    ...
</div>

この { class : bool } の記法は class と style にしか許可されていないらしい。他の属性では以下のように三項演算子などを使う必要がある。

<div v-bind:data-type="isHoge ? 'hoge' : null">
    ...
</div>

まぁこう書いて動くのはごく自然なのだが、先に class / style の記法を知ってしまうと、そうやって書くもんだという刷り込みが入ってしまいちょっとつまづいた、という話でした。