v-for : is there a way to get the key for the nested(second) loop besides "Object.keys(obj)[0]" in Vuejs?

Question

Here's the markup:

<ul>
<li v-for="(topic,label,index) in guides" :key="index">
  <ul> 
    <strong> {{label}} </strong>
    <li v-for="rule in topic"> 
        {{rule.val}},
        {{Object.keys(topic)[0]}}
    </li>
  </ul>
</li>

And here's the data for this list:

data: {

guides: {

 "CSS" : {
    1502983185472 : {
      "modifiedby" : "bkokot",
      "val" : "When adding new rule, use classes instead of ID whenever possible"
    },
    1502983192513 : {
      "modifiedby" : "bkokot",
      "val" : "Some other rule"
    },
  },
  "Other" : {
    1502628612513 : {
      "modifiedby" : "dleon",
      "val" : "Some test text"
    },
    1502982934236 : {
      "modifiedby" : "bkokot",
      "val" : "Another version of text"
    },
  }

  }
}

So as you can see there is a "guides" property which is an object of other objects that do have inner objects too. All I want is to get the keys from inner (second) loop (numbers "1502983185472" etc). The only solution that i see right now is "Object.keys(topic)[0]", but is there a more accurate alternative in vuejs for this? Adding key, index parameters to the second loop(with new unique variable names) doesn't work for me.

Here's a working fiddle: https://jsfiddle.net/thyla/yeuahvkc/1/

Please share your thoughts. If there is no good solution for this - may it be a nice topic for a feature request in Vuejs repo(unless I'm missing something terrible here)? Generally if you're curious - that number is a momentjs timestamp - I'm using this data in firebase, and saving initial timestamp as an object key seemed to be a pretty nice solution (since we need a key anyway, to save some space - I can use this key instead of another extra timestamp property in my object, this also makes the instance very 'targetable' in firebase).

Thank you in advance ! Cheers!

p.s: another possible solution is converting inner loop (css, other) from objects into arrays and using time-stamp as another object property, but I'm using firebase - saving this data as an object gives me an ability to quickly access some instance without parsing the entire parent object/array, makes it more easy to filter, search, reupdate, etc - thus converting object into array is not a good solution for instance with very large number of items.

Answer 1

Your fiddle renders the number key of the first entry of a topic for each of the rules in that topic. I'm assuming you want to actually show the number key for each corresponding rule.

That value is passed as the second parameter in the v-for:

<li v-for="(rule, ruleID) in topic"> 
   {{ rule.val }},
   {{ ruleID }}
</li>

Here's a working fiddle.

Here's the documentation on using v-for with an object.

Answer 2

This can be solved by as follows in the second loop like

<li v-for="(rule,index) in topic"> 

            {{rule.val}},
            {{index}}

        </li>

Please refer this fiddle => https://jsfiddle.net/yeuahvkc/7/