VueJS和Laravel刀片-嵌套v-for循环中的递增计数器

我正在使用v-for从一个对象创建一个人员列表，每个人都指定了一个编号。以下是一个简化的示例：

home.js：

data: function () {
        return {
            agegroups: {
                adult: 3,
                child: 1,
                infant: 2
            }
        }
    },

home.blade.php：

<ul>
    <template v-for="(num, agegroup) in agegroups">
        <li v-for="index in num">
            @{{ index }}
        </li>
    </template>
</ul>

@{{index}}

这就产生了123112

然而，我希望它能产生123456

如何做到这一点？似乎用一个简单的计数器就可以轻松实现，但我应该把它放在哪里呢？

给你：

JS

new Vue({
  el: '#app',
  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]
  }
});

HTML

  <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>

{{offset[idx]+index}

我必须创建一个基于

agegroups

预填充的变量，以跟踪早期索引，并将其添加到嵌套for循环的索引中。

给您：

JS

new Vue({
  el: '#app',
  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]
  }
});

HTML

  <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>

{{offset[idx]+index}

我必须创建一个基于

agegroups

预先填充的变量来跟踪早期索引，并将其添加到嵌套for循环的索引中