For loop array in Vuejs

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>

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

i mean how to for array in vuejs or any idea change product_value to json, product_value return array and i can't for loop that — Phương Phạm
– Phương Phạm, Commented Apr 13, 2022 at 7:07

Nikola Pavicevic · Accepted Answer · 2022-04-13 07:31:35Z

1

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>

edited Apr 13, 2022 at 7:31

answered Apr 13, 2022 at 7:04

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Phương Phạm Over a year ago

it's not a matter of style display position,. i can't for loop product_value to get properties

Nikola Pavicevic Over a year ago

@Phương Phạm hey mate, please take a look again I updated my answer.

Phương Phạm Over a year ago

sorry for the late response, i just tested it, why when i use tag p it doesnt work, sounds weird, i just learn vuejs recently

Collectives™ on Stack Overflow

For loop array in Vuejs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related