NutUI的Steps步骤条如何动态修改当前步骤？步骤条不更新怎么办？

令狐爱丹提问于 2026-02-01 15:15:24 阅读 28

框架

在用NutUI的Steps组件做订单流程页时，想通过点击按钮动态修改当前步骤。按照文档用了v-model:current-step绑定变量，但实际点击后数值变了步骤条却不更新，这是为什么？

尝试过这样写代码：


<nut-steps :steps="stepsList" v-model:current-step="current" />
<button @click="current += 1">下一步</button>

但点击按钮时控制台显示current值变化了，步骤条样式却没变，有没有漏掉什么关键配置？

UI框架

我来解答赞 6 收藏

反馈

2 条解答

程序猿芸倩 Lv1

NutUI的Steps组件要动态更新，current-step必须是响应式变量。用ref定义current，别用普通变量。

const current = ref(0)

点击按钮修改current.value就行，确保v-model:current-step绑的是这个ref。就这样。

2026-02-10 19:20

闲人翠翠 Lv1

这个问题我遇到过，基本原因是NutUI的Steps组件在更新时可能没正确监听到数据的变化。你虽然用了v-model:current-step绑定变量，但有时候Vue的响应式机制可能会卡壳，尤其是当组件内部对props的处理不够严谨的时候。

解决办法很简单：试试强制触发一下组件的更新。具体做法是在修改current值后，通过一个临时的小技巧来让Vue重新渲染。比如这样：

export default {

  data() {

    return {

      current: 0,

      stepsList: [{ title: '第一步' }, { title: '第二步' }, { title: '第三步' }]

    };

  },

  methods: {

    nextStep() {

      this.current += 1;

      // 强制刷新视图

      this.$nextTick(() => {

        this.current = this.current; // 触发一次重新赋值

      });

    }

  }

};

然后按钮改成：

<button @click="nextStep">下一步</button>

这样做是为了确保组件能正确感知到current的变化。如果还是不行，调试看看是不是有其他地方干扰了组件的状态。实在不行的话，也可以试试把整个组件包裹在<keep-alive>里，有时候也能解决问题。

最后再提醒一句，NutUI的文档有时会漏掉一些小细节，多试试这种强制刷新的办法，基本上都能搞定。

2026-02-01 16:01