Trying to clear form after submitting user input in vue 3

Question

I am trying to clear the form after a successful submission of the inputs from the user. What I tried seems to clear it after submission but it also triggers the rules of the input. I am using vue 3 as the frontend part with email js latest version to send an email to a gmail account. I tried passing through other posts but what i got didn't help as each of them.

        <q-form method="post" @submit="Submit" @reset="onReset" style="max-width:280px;" align="center">
           
    
    export default {
        components:{
            TastyHeader
        },
        setup(){
            const name =ref('')
            const food = ref('')
            const table =ref('')
            const phone = ref('')
             const email = ref('')
             
    
             const onReset = async() =>{
                

name.value =  null
           food.value =  null
            email.value =  null
            phone.value =  null
            table.value = null
         }

        const Submit=()=>{
              
              const param = {
                table: table.value,
                phone: phone.value,
                food: food.value,
                name: name.value,
                email: email.value
              }
        emailjs
        .send('service_id', 'template_id',param,'public key')
        .then(
                    (result) => {
                        console.log('SUCCESS!', result.status, result.text)
                    },
                    (error) => {
                        console.log('FAILED...', error)
                        
                    }
                )
                
         

           
                         name.value =  null
                  food.value =  null
                   email.value =  null
                   phone.value =  null
                   table.value = null
    return{
                Submit,
                onReset,
                email,
                table

,
            phone,
            food,
           name,
           dialog:ref(false)
        }
    }

}

Answer 1

Please read the basic usage for Quasar's form which documents how to reset validation. As it explains, you need to assign a ref to <q-form> then call the resetValidation() method on that ref after you've submitted the form and cleared the inputs. A basic example for your app is shown below:

<q-form ref="myForm">

setup () {
  const myForm = ref(null)

  function Submit () {
    emailjs.send().then(success => {
      if (success) {
        // after clearing inputs
        myForm.value.resetValidation()
      }
    })
  }

  return {
    myForm,
    Submit,
    // ...
  }
}