Vuejs中的for循环数组

Question

<p v-for="(product_value, product_key, product_index) in item.product">
    {{product_key}} :{{product_value}}
    <div v-for="(item_a,index_a) in product_value" :key="index_a">
        ss{{item_a}}
    </div>
</p>

数据显示在视图中

abc :[ { "Colorx": "1"... } ]
ao_so_mi :[ { "ColorBlue": "1" .... }, { "ColorRed": "1", .... } ]

数据库值

{"abc":[{"Colorx":"1" ... }],"ao_so_mi":[{"ColorBlue":"1" .... },{"ColorRed":"1", ... }

return data 
this.$set(this,'items',response.data.product.data);
    for (var i = 0; i < this.items.length; i++) {
        this.items[i].product = JSON.parse(this.items[i].product);

i wanna show same : 
+item #abc : 
- Colorx : qty 1
+item #ao_so_mi : 
- ClolorBlu: qty 1
- ColorRed: qty 1

它占用了我不少时间，感谢您的帮助

Answer 1

如果我没理解错的话，你可以再次循环对象 keys/values:

new Vue({
  el: "#demo",
  data() {
    return {
      item: {product :{"abc":[{"Colorx":"1"  }],"ao_so_mi":[{"ColorBlue":"1" },{"ColorRed":"1" }]}}
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="(product_value, product_key, product_index) in item.product">
    +item #{{ product_key }} :
    <div v-for="(item_a, index_a) in product_value" :key="index_a">
      <div v-for="(value, key) in item_a" :key="key">
        - {{ key }}: qty {{ value }}
      </div>
    </div>
  </div>
</div>

Vuejs中的for循环数组

For loop array in Vuejs

javascript

laravel

vue.js

vuejs2