0

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

1 件の回答 1

1

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

const maps = [{
  banned: true,
  name: "test1",
},{
  banned: false,
  name: "test2",
}];
new Vue({
  el: "#map-list",
  data: {
   maps: maps,
   disabled: "disabled",
   pointer: {
     cursor: "pointer"
   }
 },
});
.disabled {
  color: #f0f0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

<ul class="list-group" id="map-list">
  <li class="list-group-item" v-for="(map, index) in maps" 
    :value="index" 
    :class="[map.banned ? disabled : '']"
    :style="[map.banned ? '' : pointer]"
  >{{ map.name }}</li>
</ul>

1
  • Typoでした。ご指摘ありがとうございます Commented 2017年1月7日 11:56

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。