提交表單后顯示 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(); 清除錯誤消息，對我來說效果很好