JSFiddle - React, Tailwind, and code Playground

Vuejs Can't access the inner loop KEY (that "long number " part which is a momentjs timestamp)

by igor thyla

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <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>
  </ul>
</div>

JavaScript

new Vue({
	el: '#app',
  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" : "bkokot",
          "val" : "Some test text"
        },
        1502982934236 : {
          "modifiedby" : "bkokot",
          "val" : "Another version of text"
        },
      }
      
    }
  }
});