时间线组件动态数据加载后步骤点顺序错乱怎么办？

UI家豪提问于 2026-02-13 22:23:23 阅读 9

组件

我在用Vue做时间线组件时遇到问题，当从接口动态获取steps数据后，时间线的步骤点显示顺序总是和数组顺序相反。比如数据是[步骤1,步骤2,步骤3]，但页面上显示成3-2-1排列。

我尝试在CSS里给.step-item添加了flex-direction: row-reverse，但这样固定布局后动态增删步骤时又会出现错位。有没有更好的办法让时间线顺序始终与数据数组保持一致？

现在代码结构大概是这样的：

<template>
  <div class="timeline">
    <div v-for="(item, index) in steps" :key="index" class="step-item">
      {{ item.content }}
    </div>
  </div>
</template>

导航组件

我来解答赞 3 收藏

反馈

1 条解答

芯依酱~ Lv1

把v-for的index改成steps.length - index - 1就行了。
或者直接reverse数组：steps = [...steps].reverse()，记得深拷贝一下别改原数据。

<template>

  <div class="timeline">

    <div v-for="(item, index) in steps.slice().reverse()" :key="index" class="step-item">

      {{ item.content }}

    </div>

  </div>

</template>

2026-02-14 11:17