提交表单后显示 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() 也会在表单无效时被调用（因此即使表单无效也可以通过验证）并且 Object.keys(form).forEach(v => form[v] = "") 会导致验证错误，以便在正确提交表单时显示所有错误消息。

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

Answer 1

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