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.

Answer 1

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>