提交表单后显示 vuelidate 错误消息

Question

我在 vuejs3 和组合 api 中使用vuelidate进行表单验证。

提交表格后，我调用验证。 如果验证通过，则应清空表单字段并重置 vuelidate。

我目前这样做是这样的：

const submitForm = () => {
  if (!v$.value.$validate()) {
    console.log(`Error : ${form} `)
    return
  } 
  // there will be an axios post request here:
  console.log(form)
  v$.value.$reset()
  Object.keys(form).forEach(v => form[v] = "")
  
}

出于某种原因，当表单无效时也会调用v$.value.$reset() （因此即使 forms 无效，验证也会通过）和Object.keys(form).forEach(v => form[v] = "")导致验证错误，以便在正确提交表单时显示所有错误消息。

如何在不重新加载页面的情况下清除表单并仅在提交无错误后才重置 vuelidate？

Answer 1

我们可以使用this.$v.$reset(); 清除错误消息，对我来说效果很好