Vue.js：Class 綁定在循環 object 時不起作用

Question

我有一個 object 這樣的數據：

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",
   }
}

這是我的模板代碼：

<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>

當我嘗試渲染它時沒有錯誤，但我的綁定 class 不起作用。 我對 Vue 比較陌生。

Answer 1

此處的index引用 object 中的鍵，而不是v-for提供的自動遞增鍵。 添加第三個元素i應該解決這個問題。

 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>