Vue.js: Class binding doesn't work when looping through an object

Question

I have an object data like this :

object = {
   "2020092020-08-01":{
      "value":"123",
      "id_number":"202009"
   },
   "2020092020-09-01":{
      "value":"123",
      "id_number":"202009"
   },
   "2020012020-08-01":{
      "value":"123",
      "id_number":"202001"
   },
   "2020022020-09-01":{
      "value":"123",
      "id_number":"202002"
   },
   "2020012020-09-01":{
      "value":"123",
      "id_number":"202001"
   },
   "2020022020-08-01":{
      "value":"123",
      "id_number":"202002"
   },
   "2020112020-08-01":{
      "value":"123",
      "id_number":"202011",
   }
}

and this is my template code :

<div v-for="(a, index) in object" :key="index">
    <div :class="[index % 2 == 0 ? 'bg-grey' : 'bg-white']">
        {{a.value}} - {{a.id_number}}
    </div>
</div>

There is no error when I'm trying to render it, but my binding class doesn't work. I am relatively new to Vue.

Majed Badawi · Accepted Answer · 2020-09-01 12:26:00Z

The index here is referencing the keys in the object, not the autoincremented one provided by v-for. Adding a third element i should solve the issue.

new Vue({
     el:"#app",
     data(){
          return{
               object: {
                    "2020092020-08-01":{
                         "value":"123",
                         "id_number":"202009"
                    },
                    "2020092020-09-01":{
                         "value":"123",
                         "id_number":"202009"
                    },
                    "2020012020-08-01":{
                         "value":"123",
                         "id_number":"202001"
                    },
                    "2020022020-09-01":{
                         "value":"123",
                         "id_number":"202002"
                    },
                    "2020012020-09-01":{
                         "value":"123",
                         "id_number":"202001"
                    },
                    "2020022020-08-01":{
                         "value":"123",
                         "id_number":"202002"
                    },
                    "2020112020-08-01":{
                         "value":"123",
                         "id_number":"202011",
                    }
               }
          }
     }
});

.bg-grey{
     color:grey;
}
.bg-white{
     color:white;
}
#app{
     background-color:pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
     <div v-for="(a, index, i) in object" :key="i">
          <div :class="[i % 2 == 0 ? 'bg-grey' : 'bg-white']">
               {{a.value}} - {{a.id_number}}
          </div>
     </div>
</div>

Collectives™ on Stack Overflow

Vue.js: Class binding doesn't work when looping through an object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related