用vant实现动态索引栏

created() {
    var list = this.textList.sort();
    console.log(list);

    var groups = []
    let childList = []
    for (var i = 0; i < list.length; i++) {
     let itemChar = list[i].charAt(0)
    //  let preChar = list[i].charAt(0)
    let preChar;
     if (i != 0) {
      preChar = list[i - 1].charAt(0)
     }
     // 当前首字母和上一个不一样,把分组放进列表
     if (itemChar != preChar) {
      groups.push({code: preChar, list: childList})
      childList = []
     }
     childList.push(list[i])
     
     // 循环结束,把最后的分组放进去
     if(i == list.length -1) {
      groups.push({code: itemChar, list: childList})
     }
    }
    this.indexList = groups;
    console.log('123123', this.indexList)
  },
  data() {
    return {
      indexList: [],
     textList: [
        "v11",
        "aaa",
        "aab",
        "ffg",
        "aac",
        "baa",
        "fff",
        "bab",
        "bac",
        "bbx",
        "aac",
        "ffe",
        "ges",
        "vag",
      ],
    };
  },

<template v-for="item in indexList">
      <van-index-bar highlight-color="green">
        <van-index-anchor :index="item.code" />
          <template v-for="name in item.list">
            <van-cell :title="name" />
          </template>
      </van-index-bar>
    </template>

![在这里插入图片描述](https://img-blog.csdnimg.cn/bd439bb52ba74aaf8316cc5cb21bd684.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBANDUyNDA1NzM=,size_12,color_FFFFFF,t_70,g_se,x_16)