JSFiddle - React, Tailwind, and code Playground

by Saurabh Mimani

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-resource.min.js"></script>
<div id="app">
  <ul>
    <template v-for="(num, agegroup, idx) in agegroups" v-init="getOffset(num)">
      <li v-for="index in num">
         {{offset[idx] + index}}
      </li>
    </template>
  </ul>
</div>

JavaScript

new Vue({
  el: '#app',
  methods: {
    getOffset(idx) {
    alert(idx)
    this.offset += idx
    }
  },
  mounted () {
    var sum = 0
    for (const key of Object.keys(this.agegroups)) {
      sum += this.agegroups[key]
    	this.offset.push(sum)
		}
  },
  data: {
    agegroups: {
      adult: 3,
      child: 1,
      infant: 2
    },
    offset: [0]
  }
});