使用 vee-validate 返回后无法进入下一步

Question

我正在使用 vee-validate v3 验证多步骤表单，然后调用 axios。我使用 handleSubmit 并为每个步骤添加了带有唯一键的 ValidationObserver。现在我的问题是在进入下一步然后返回步骤 1 后，即使没有发现字段错误，下一个按钮也不会触发。

代码结构如下：https://codesandbox.io/s/codesandbox-forked-6hrh4?file=/src/Demo.vue

注：

我真实项目中的currentStep来自本地存储。
由于实际字段太长，示例代码只是结构。

Answer 1

放置在 <form> 元素内的 <button> 默认为 type="submit".

这意味着在任何 <form> 中，如果您不想提交表单，您需要在 <button> click 上调用 preventDefault()。

正在将@click改成@click.preventfixes the issue（因为点击上一个时不再提交表单，所以currentStep在被 @click 表达式减少后不再增加 1 - 让它看起来什么都没发生。事实上， @click 表达式和 onSubmit 得到如果不使用 .prevent 修饰符则执行。

作为替代方案，您可以将 <button> 更改为锚点：

<a href class="btn" @click="currentStep--" v-text="Previous" />

尽管我个人倾向于防止违约。

使用 vee-validate 返回后无法进入下一步

Can't go to next step after going back using vee-validate

vue.js

vee-validate