How to set incremental counter for nested arrays using Vue JS

Question

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:

    <div v-for="member in cast"> <!--array #1-->
        <input name="cast_list[@{{ memberCounter }}][actor]" value="@{{ member.actor }}">
        <input name="cast_list[@{{ memberCounter }}][role]" value="@{{ member.role }}">
        <div v-for="group in ensemble_groups"> <!--array #2-->
          <input type="checkbox"
            name="cast_list[@{{ memberCounter }}][groups][]"
            value="@{{ group }}"
            v-model="member.groups"
                  id="g-@{{ memberCounter }}-@{{ $index }}">
          <label for="g-@{{ memberCounter }}-@{{ $index }}">@{{ group }}</label>
        </div>
    </div>

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.

flipjms · Accepted Answer · 2016-09-22 17:06:10Z

3

You can specify an alias for each index like this:

<div v-for="(firstIndex, member) in cast"> <!--array #1-->

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:

<div v-for="(member, firstIndex) in cast"> <!--array #1-->

answered Sep 22, 2016 at 17:06

flipjms

7923 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Fowler Over a year ago

Oh, this is beautiful. Thank you! Any idea where I might find this in the VueJS docs?

Roy J Over a year ago

@danfo It's in the v-for documentation, in the third example section vuejs.org/guide/list.html#v-for

Collectives™ on Stack Overflow

How to set incremental counter for nested arrays using Vue JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related