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

Posted 2023-02-23

【中文标题】使用 vee-validate 返回后无法进入下一步

【英文标题】：Can't go to next step after going back using vee-validate

【发布时间】：2021-04-18 15:57:59

【问题描述】：

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

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

注意：

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

【参考方案1】：

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

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

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

---

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

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

虽然我个人会阻止默认。

【讨论】：

我觉得和<form @submit.prevent="">一样？

@claudios，不是真的。阻止该按钮上的click 可防止在按下按钮时执行来自onSubmit 的代码。而在表单上使用 @submit.prevent 则不会（它只会阻止页面在提交时重新加载，这是默认的 html 表单行为，因为通常 <form> 会将请求发送到后端并重新加载页面 - 或加载任何 @ <form> 上的 987654344@ 参数指向）。每当您假设某事以某种方式有效时，明智的做法是测试它是否确实有效。

是的，你是对的。它在我的示例中使用防止或锚标记工作。但在我的实际代码中没有运气。这很奇怪，我想我错过了一些不确定的东西。

我可以进一步提供帮助的唯一方法是，如果您从所谓的“实际代码”到沙箱中添加了足够多的内容，直到您重新制作并且我可以看到问题所在。旁注：编码不需要运气。只有方法和耐心。

哦，我知道是什么导致了我的问题。这是因为我的自定义文件上传器。顺便谢谢