XMLにVue.jsのテンプレートを書くとParseErrorになるのを回避する

Vue.jsでHTMLの属性にオブジェクトや変数の値を割り当てる際に、v-bindというものを使います。

<div v-bind:class="{red: isWarn}">警告なら赤い</div>

これは isWarn という変数が 真の場合にこのタグのclass属性にredが追加される例です。

この v-bind:class にある : がXMLとしてはNGらしく、テンプレートをXMLで記述するフレームワークで困りました。

解決策は、v-bind属性にもう一段深いオブジェクトを指定するとのこと。

上の例は下の例と同じ意味になります。これなら :を使わないので大丈夫。

<div v-bind="{class: {red: isWarn}}">警告なら赤い</div>

参考: Vue.js#v-bind の Exampleのところ