如何使用Vue JS为嵌套数组设置递增计数器

Question

我正在使用Vue JS处理两层深的数组，我需要一个从0开始递增的索引来遍历顶层数组中的每个元素。

以下是我的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>

还有我的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++;
  },
},

您可以看到，我试图将计算属性定义为我的计数器，但它并没有按照我需要的那样工作。 @{{ $index }} 会起作用，但在我的第二个数组中，它会一遍又一遍地循环为 0,1,2,3，而不是保留第一个数组的增量值。

- Daniel Fowler

Answer 1

您可以像这样为每个索引指定别名：

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

因此，在第二个循环内，您可以调用firstIndex

如果您使用的是Vue 2.0，则必须颠倒索引顺序：

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

- flipjms

---

哦，这太棒了。谢谢！你知道我在VueJS文档中可以找到这个吗？ - Daniel Fowler

@danfo 这在 v-for 文档中有提到，在第三个示例部分 https://vuejs.org/guide/list.html#v-for - Roy J