Search code examples
javascriptarraysjsonvue.jsv-for

How to display nested json array with v-for index loop


I have JSON Array with following structure

    items: [
     {
      ID: 11,
      UserID: "test.com",
      UserRole: "user",
      timeStamp: "2021-03-23T15:54:02.125578",
      dialogs: [
        {
          "Bot": "Why is data missing?",
          "test.com": "not available",
          "Bot": "please enter ID",
          "test.com": "1234"

        }
      ]
    }
  ]

I have to display elements inside dialogs as list. i am using v-for but dialogs is displaying as array with commas. how can i show this with index? Following is v-for loop i am using

    <ul v-for="item  in items" :key="item">
        <li v-for="(dialog, index) in dialogs" :key="index">{{key}}: {{dialogs}}</li>
    </ul>

Solution

  •  <ul v-for="item  in items" :key="item">
          <li v-for="(dialog, index) in item.dialogs" :key="index">{{index}}: {{dialog}}</li>
      </ul>