[Vuejs]-Using 'v-for' to output object to list

by

0👍

✅

Try this

new Vue({
  el: '#app',
  data: {
    object: {
      parentKey1: {
        childKey1: 'value',
        childKey2: 'value'
      },
      parentKey2: {
        childKey3: 'value',
        childKey4: 'value'
      }
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <div v-for="(value, key) in object">
    {{key}} -
    <span v-for="(cvalue, ckey) in value">
         {{ ckey }}  {{ cvalue }} {{' '}}
    <span>
  </div>
</div>

0👍

You need to provide a new nested iteration to do that.

<ul>
    <li v-for="(parentValue, parentKey) in object">
      <template v-for((childValue, childKey) in parentValue)>
        {{ parentKey }} - {{ childKey }} {{ childValue }}
      </template>
    </li>
</ul>

-1👍

Well the value is still an Array thats why it is displayed like that.

Maybe try 

<ul>
    <li v-for="(value, key) in object">{{ key }} - <span v-for="val in value">{{ val }}</span></li>
</ul>

Leave a comment