For loop array in Vuejs-CodePudding

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

data show in view

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

database value

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

it took up quite a bit of my time, thanks for any help

CodePudding user response：

If I understood you correctly , you can loop again for objects 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>