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>&nbsp; <div>&nbsp; &nbsp; &nbsp;helloworld&nbsp; &nbsp; &nbsp;<router-link :to="{name:'Mypage'}"> 1111</router-link>&nbsp; &nbsp; &nbsp;<ul id="example-1">&nbsp; &nbsp; &nbsp; &nbsp; <li v-for="(item, index1) in items">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div v-for="(v, index2) in item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ getIndex () }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div></template><script>export default {&nbsp; name: 'HelloWorld',&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; items: [&nbsp; &nbsp; &nbsp; &nbsp; ['a', 'b', 'c'],&nbsp; &nbsp; &nbsp; &nbsp; ['e', 'f', 'a', 'b', 'c', 'a', 'b', 'c']&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; getIndex () {&nbsp; &nbsp; &nbsp; if (!this.index) {&nbsp; &nbsp; &nbsp; &nbsp; this.index = 1&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; this.index++&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; return this.index&nbsp; &nbsp; }&nbsp; }}</script>满意请采纳，有问题继续探讨