Skip to content
Advertisement

Vue.js – v-for to print object name only

I have a nested object and only wanted to print the object name. How do I do this in vue.js?

var object1 = {
  'obj1' : {
    'obj1a' : 'a',
    'obj1b' : 'b'
  },
  'obj2' : {
    'obj2c' : 'c',
    'obj2d' : 'd'
  }
}

This code prints the entire content of the object being iterated:

<div v-for="obj in object1" v-bind:key="obj">
  {{ obj }}
</div>

How can I make it only print strings obj1 and obj2?

Thanks!

Advertisement

Answer

Add key,index in v-for loop like v-for="(obj,key,index) in object1"

<div v-for="(obj,key,index) in object1" v-bind:key="obj">
  {{ key }}
</div>
Advertisement