步骤进度条的加载状态卡住了怎么办？

诺曦🍀 提问于 2026-02-13 12:22:31 阅读 34

交互

在做表单提交流程时，用步骤条显示进度，但切换到第三步时加载动画一直转不停，页面实际已经加载完成。试过用v-if控制加载状态，但状态切换不连贯。

代码结构是这样的：

<template>
  <div class="step-container">
    <div v-for="(step, index) in steps" :key="step.id" class="step" :class="{ active: currentStep === index }">
      <span v-if="!step.loaded">-loading...</span>
      <span v-else>✓</span>
    </div>
  </div>
</template>

在提交时用了setTimeout模拟异步请求：

methods: {
  submitForm() {
    this.currentStep = 2
    setTimeout(() => {
      this.steps[2].loaded = true
    }, 1500)
  }
}

但切换到第三步时，加载图标没消失，currentStep数值确实在变化。是不是状态更新和DOM渲染有冲突？

加载状态步骤进度

我来解答赞 3 收藏

反馈

1 条解答

珂簪 Lv1

你这个问题其实是Vue的响应式机制没完全生效导致的，setTimeout回调里的状态更新有时候确实会有点小问题，尤其是在异步操作后。解决办法也很简单，可以用Vue的nextTick来确保DOM更新完成后再修改状态。

具体改法是这样的：在submitForm方法里，把setTimeout的逻辑稍微调整一下，用this.$nextTick包裹状态更新的部分。代码可以改成这样：

methods: {

  submitForm() {

    this.currentStep = 2

    setTimeout(() => {

      this.$nextTick(() => {

        this.steps[2].loaded = true

      })

    }, 1500)

  }

}

这里的关键点是，$nextTick能确保在DOM更新循环结束后再执行回调，这样就不会出现状态更新了但界面没反应的情况。其实这问题挺常见的，尤其是涉及到异步操作的时候，稍微不注意就会踩坑。

如果你还是觉得麻烦，也可以考虑用一些现成的插件来做步骤条，比如vue-step-wizard或者element-plus里的Steps组件，它们内部已经处理好这些状态同步的问题了，直接用就行，省得自己折腾。

最后提醒一句，调试这种问题的时候，可以在控制台打印一下this.steps的状态，看看是不是真的更新了，有时候问题其实不在DOM渲染，而是数据绑定写错了。我之前就遇到过类似的情况，排查了半天才发现是对象引用的问题，真是累觉不爱。

2026-02-14 10:14