[Vuejs]-Loop Object with Objects in Vue2 template

by

1👍

✅

First, your object is not JSON valid as @neha mentioned also.
It should be like this:

    {
  "obj1":{
    id: 1,
    name: "Test",
    articles: [
      {
        id: 1,
        name: "Test",
        price: 1.0,
        quantity: 1
      }
    ]
  },
   "obj2":{
    id: 1,
    name: "Test",
    articles: [
      {
        id: 1,
        name: "Test",
        price: 1.0,
        quantity: 1
      }
    ]
  }
}

Then you will be able to "loop" like this:

<div id="app">
  <ul>
    <li v-for="(item, key, index) in objectItems">
      {{ item.id }} - {{ key }} - {{ index }}
    </li>
  </ul>
</div>

The example is from DigitalOcean:
https://www.digitalocean.com/community/tutorials/vuejs-iterating-v-for

But I strongly suggest you redo the object from the backend so that the main object will be in an array.

👤Robert Coroianu

Leave a comment