vue 数组中嵌套数组_如何使用Vue JS为嵌套数组设置增量计数器

I'm two levels deep in arrays using Vue JS and I need an index that starts at 0 and increments for each item in the top array.

Here is my HTML:

name="cast_list[@{{ memberCounter }}][groups][]"

value="@{{ group }}"

v-model="member.groups"

id="g-@{{ memberCounter }}-@{{ $index }}">

@{{ group }}

and my Vue JS:

data: {

ensemble_groups: [{{ ensemble_groups }}"{{ group_name }}",{{ /ensemble_groups }}],

cast: [

{{ cast_list }}

{

actor: '{{ actor }}',

role: '{{ role }}',

groups: [{{ groups }}"{{ value }}",{{ /groups }}],

counter: 0 // trying to set default value

},

{{ /cast_list }}

],

},

computed: {

memberCounter: function() {

return this.counter++;

},

},

You can see I'm trying to define a computed property as my counter, but it's not behaving how I need it. @{{ $index }} would work except within my 2nd array it gets looped as 0,1,2,3 over and over instead of holding fast to the incremental value of my first array.

解决方案

You can specify an alias for each index like this:

So, inside your second loop you can call the firstIndex

If you're using Vue 2.0, you have to reverse the order of the index: