vuejs多层循环嵌套，怎么获取一个连续的index

Question

如题，有一个多维数组，需要在最深层打印一个index，我希望这个index是连续的即，对于以下的代码<ul id="example-1">        <li v-for="item in items">            <div v-for="v in item">                {{index}} {{v}}            </div>        </li>    </ul> var example1 = new Vue({        el: '#example-1',        data: {            items: [                ['a', 'b', 'c'],                ['e', 'f']            ]    }    });代码中的index就是我说的连续的index，他应该是1，2，3，4，5···这种形式，而不是vue v-for中通过$index获取的0，1，2，0，1我试图通过在data中声明一个变量listIndex专门记录这个索引变量，在每次v-for循环中自增，但是实现时有问题，如果直接写{{listIndex++}}，会导致listIndex自增无限循环触发，页面卡死。以上.

Answer 1

官网上有这么一句话：

值得注意的是只有当实例被创建时 data 中存在的属性是响应式的。也就是说如果你添加一个新的属性，像：

vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新

这个问题的产生关键恰好就是vue实例中data的自动响应，所以解决办法也很简单：在创建实例之后再添加index即可：

<template>

  <div>

     helloworld

     <router-link :to="{name:'Mypage'}"> 1111</router-link>

     <ul id="example-1">

        <li v-for="(item, index1) in items">

            <div v-for="(v, index2) in item">

            {{ getIndex () }}

            </div>

        </li>

    </ul>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data () {

    return {

      items: [

        ['a', 'b', 'c'],

        ['e', 'f', 'a', 'b', 'c', 'a', 'b', 'c']

      ]

    }

  },

  methods: {

    getIndex () {

      if (!this.index) {

        this.index = 1

      } else {

        this.index++

      }

      return this.index

    }

  }

}

</script>

满意请采纳，有问题继续探讨