[TIndexes] 使用异步数据加载时，索引链接失效

[hizhangbo]

tdesign-mobile-vue 版本

1.4.3

重现链接

No response

重现步骤

• 使用异步加载时，点击索引报错

chunk-EAUNOWDZ.js?v=ee58a068:2389 Uncaught TypeError: Cannot read properties of undefined (reading 'top')
    at scrollToByIndex2 (tdesign-mobile-vue.j…v=ee58a068:8402:209)
    at handleSidebarItemClick2 (tdesign-mobile-vue.js?v=ee58a068:8413:7)
    at onClick (tdesign-mobile-vue.js?v=ee58a068:8505:13)
    at callWithErrorHandling (chunk-EAUNOWDZ.js?v=ee58a068:2320:19)
    at callWithAsyncErrorHandling (chunk-EAUNOWDZ.js?v=ee58a068:2327:17)
    at HTMLDivElement.invoker (chunk-EAUNOWDZ.js?v=ee58a068:11190:5)

• 代码

const list = ref([])
const indexList = ref([]);

const getDefaultIndexes = async () => {
  return await getIndexes();
}

getDefaultIndexes().then(function(result) {
  list.value = result;
  indexList.value = result.map((item) => item.index);
});

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

groupTop 通过异步加载数据时，长度一直为0

[github-actions]

👋 @hizhangbo，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[anlyyao]

@hizhangbo 辛苦贴一下完整的可复现代码，我简单在示例上使用setTimeout延迟索引indexList，未能复现你的问题

https://stackblitz.com/edit/gwj6fr?file=src%2Fdemo.vue

[hizhangbo]

@hizhangbo 辛苦贴一下完整的可复现代码，我简单在示例上使用setTimeout延迟索引indexList，未能复现你的问题

https://stackblitz.com/edit/gwj6fr?file=src%2Fdemo.vue

<template>
  <div class="component-wrap">
    <t-indexes :index-list="indexList">
      <template v-for="item in list" :key="item.index">
        <t-indexes-anchor :index="item.index" />
        <t-cell-group>
          <t-cell v-for="(val, i) in item.children" :key="i" :title="val" />
        </t-cell-group>
      </template>
    </t-indexes>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const list = ref([]);
const indexList = ref([]);

onMounted(() => {
  setTimeout(() => {
    list.value = [
      {
        index: 'A',
        children: [
          '阿坝123',
          '阿拉善',
          '阿里',
          '安康',
          '安庆',
          '鞍山',
          '安顺',
          '安阳',
          '澳门',
        ],
      },
      {
        index: 'B',
        children: [
          '北京',
          '白银',
          '保定',
          '宝鸡',
          '保山',
          '包头',
          '巴中',
          '北海',
          '蚌埠',
          '本溪',
          '毕节',
          '滨州',
          '百色',
          '亳州',
        ],
      },
      {
        index: 'C',
        children: [
          '重庆',
          '成都',
          '长沙',
          '长春',
          '沧州',
          '常德',
          '昌都',
          '长治',
          '常州',
          '巢湖',
          '潮州',
          '承德',
          '郴州',
          '赤峰',
          '池州',
          '崇左',
          '楚雄',
          '滁州',
          '朝阳',
        ],
      },
      {
        index: 'D',
        children: [
          '大连',
          '东莞',
          '大理',
          '丹东',
          '大庆',
          '大同',
          '大兴安岭',
          '德宏',
          '德阳',
          '德州',
          '定西',
          '迪庆',
          '东营',
        ],
      },
      {
        index: 'E',
        children: ['鄂尔多斯', '恩施', '鄂州'],
      },
      {
        index: 'F',
        children: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳'],
      },
      {
        index: 'G',
        children: [
          '广州',
          '桂林',
          '贵阳',
          '甘南',
          '赣州',
          '甘孜',
          '广安',
          '广元',
          '贵港',
          '果洛',
        ],
      },
      {
        index: 'J',
        children: [
          '揭阳',
          '吉林',
          '晋江',
          '吉安',
          '胶州',
          '嘉兴',
          '济南',
          '鸡西',
          '荆州',
          '江门',
          '基隆',
        ],
      },
      {
        index: 'K',
        children: ['昆明', '开封', '康定', '喀什'],
      },
    ];
    indexList.value = list.value.map((item) => item.index);
  }, 2000);
});
</script>
<style lang="less">
.component-wrap {
  height: calc(100vh - 50px);
}
</style>