[t-steps] 动态改变步骤项时展示错乱

[mkdirnow]

tdesign-mobile-vue 版本

1.6.0

重现链接

No response

重现步骤

<script lang="ts" setup>
const status = ref(false)

const list = computed(() => {
  return [
    '1',
    status.value ? '1.5' : undefined,
    '2',
    '3',
  ].filter(x => x !== undefined)
})
</script>

<template>
  <div class="flex flex-col bg-white p-20px">
    <t-switch v-model="status"></t-switch>
    <t-steps class="mt-30px" layout="vertical">
      <template v-for="(item, i) in list" :key="`${i}${item}`">
        <t-step-item :title="`第 ${item} 步`"></t-step-item>
      </template>
    </t-steps>
  </div>
</template>

<style lang="less" scoped></style>

期望结果

排版按顺序展示

实际结果

框架版本

Nuxt(3.14.1592)

浏览器版本

Chrome(131.0.6778.86)

系统版本

macOS(15.1)

Node版本

v23.3.0

补充说明

No response

[github-actions]

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

[mkdirnow]

目前只能强制重新渲染一次才能正常

<script lang="ts" setup>
const status = ref(false)
+ const show = ref(true)

const list = computed(() => {
  return [
    '1',
    status.value ? '1.5' : undefined,
    '2',
    '3',
  ].filter(x => x !== undefined)
})

+ watch(list, async () => {
+   show.value = false
+   await nextTick()
+   show.value = true
+ })
</script>

<template>
  <div class="flex flex-col bg-white p-20px">
    <t-switch v-model="status"></t-switch>
-    <t-steps class="mt-30px" layout="vertical">
+    <t-steps v-if="show" class="mt-30px" layout="vertical">
      <template v-for="(item, i) in list" :key="`${i}${item}`">
        <t-step-item :title="`第 ${item} 步`"></t-step-item>
      </template>
    </t-steps>
  </div>
</template>

<style lang="less" scoped></style>