vue.jsのv-bind:style構文で条件分技をしたい
以下のソースでmap.banned
がfalseの場合にcursor:pointer
を追加してtrueの場合に消したかったのですが、どちらの場合でもcursor:pointer
がついてしまいます。
上のv-bind:class
では条件式を正しく評価できています。
v-bind:style
ではv-bind:class
のような条件式をつかえないのでしょうか、それとも他に方法があるのでしょうか。
html
<ul class="list-group" id="map-list">
<li class="list-group-item" v-for="(map, index) in maps" v-on:click="listClicked"
v-bind:value="index"
v-bind:class="[map.banned ? disabled : '']"
v-bind:style="[map.benned ? '': pointer]"
>{% map.name %}</li>
</ul>
Javascript(vue.jsの初期化部分抜粋)
data: {
maps: maps,
disabled: "disabled",
pointer: {
cursor: "pointer"
}
},