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

by

0👍

✅

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

0👍

There are 2 changes required.

  • In your dialogs you have duplicate keys, so they need to separated out into two different objects.
  • In your HTML part you need to loop as items.dialogs

Here is the full code.

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    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"
        }
      ]
    }
  ]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

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

Leave a comment