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

LiuHD
  • 5
新手上路,请多包涵

如题,有一个多维数组,需要在最深层打印一个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自增无限循环触发,页面卡死。

以上.

回复
阅读 6.8k
5 个回答
✓ 已被采纳

官网上有这么一句话

值得注意的是只有当实例被创建时 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>

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

v-for=“(item ,index) in items”

v-for=“(v ,key) in item”
就可以通过index和key获取了,手机敲代码见谅

陌路凡歌
  • 7.8k

在外面var 一个变量进行累加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <ul id="example-1">
                <li v-for="(item,index) in items">           
                    <div v-for="(v,index2) in item">
                            {{myindex()}}{{v}}
                    </div>
                </li>
            </ul>
    <script src="./vue.js"></script>
    <script>
        var  indexnum = 0;
         var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                ['a', 'b', 'c'],
                ['e', 'f']
            ]          
    },
    methods: {
        myindex:function(n){   
            indexnum++;
            return indexnum;
        }
    }
    });
    </script>
</body>
</html>

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

                <div v-for="(v,index2) in item">
                    {{index*(item.length+1)+index2+1}}{{v}}
                </div>
            </li>
LiuHD
  • 5
新手上路,请多包涵

补充一个答案:

getIndex: function(pIndex, cIndex) {
                var listId = 0;
                for (var i = 0; i < pIndex; i++) {
                    listId += this.items[i].length;
                }
                listId = listId + cIndex + 1;
                return listId;
            }

通过传入父数组遍历到的索引pIndex(通过$parent.$index得到),以及子数组的索引cIndex通过函数式编程得到,但是这种方法增加了计算量,不如一个自增的变量来的明了~

宣传栏