vue.jsのv-bind:style構文で条件分技をしたい

投稿者: Anonymous

以下のソースで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"
   }          
 },

解決

単純なTypoではないですか?v-bind:styleのmap.bennedをmap.bannedになおすと正しく動いているように見えます。

_x000D_

_x000D_

const maps = [{_x000D_
  banned: true,_x000D_
  name: "test1",_x000D_
},{_x000D_
  banned: false,_x000D_
  name: "test2",_x000D_
}];_x000D_
new Vue({_x000D_
  el: "#map-list",_x000D_
  data: {_x000D_
   maps: maps,_x000D_
   disabled: "disabled",_x000D_
   pointer: {_x000D_
     cursor: "pointer"_x000D_
   }_x000D_
 },_x000D_
});

_x000D_

.disabled {_x000D_
  color: #f0f0f0;_x000D_
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>_x000D_
_x000D_
<ul class="list-group" id="map-list">_x000D_
  <li class="list-group-item" v-for="(map, index) in maps" _x000D_
    :value="index" _x000D_
    :class="[map.banned ? disabled : '']"_x000D_
    :style="[map.banned ? '' : pointer]"_x000D_
  >{{ map.name }}</li>_x000D_
</ul>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *