31693


以下のソースで`map.banned`がfalseの場合に`cursor:pointer`を追加してtrueの場合に消したかったのですが、どちらの場合でも`cursor:pointer`がついてしまいます。

上の`v-bind:class`では条件式を正しく評価できています。

`v-bind:style`では`v-bind:class`のような条件式をつかえないのでしょうか、それとも他に方法があるのでしょうか。

**html**

[code]

    <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>
    
[/code]

**Javascript(vue.jsの初期化部分抜粋)**

[code]

     data: {
       maps: maps,
       disabled: "disabled",
       pointer: {
         cursor: "pointer"
       }          
     },
    
[/code]


CC BY-SA 3.0
2017-01-07T10:34:56.737
31691
2017-01-07T11:48:00.393
7232
question
javascript vue.js
vue.jsのv-bind:style構文で条件分技をしたい


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

[code]

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

[code]

    .disabled {
      color: #f0f0f0;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2017-01-07T11:48:00.393
31693
2017-01-07T11:48:00.393
2376
31691
answer