如何在onSubmit方法中重置Quasar的q-form表单

不用手动逐个重置字段的话，Quasar的Q-Form自带了reset()方法，直接调用就能一键重置整个表单，步骤如下：

1. 给你的Q-Form组件添加ref属性：

<q-form ref="contactForm">
  <!-- 你的表单字段（如q-input等） -->
</q-form>

2. 在脚本部分定义对应ref：

const contactForm = ref(null)

3. 在API请求成功的回调里调用reset()方法：
   修改你的onSubmit函数，在请求成功的逻辑中添加重置操作：

const onSubmit = (event) => { 
  let jsonData = {
    FirstName: firstName.value,
    LastName: lastName.value,
    PhoneNumber: phoneNumber.value,
    EmailAddress: emailAddress.value,
    Message: message.value,
    Token: token.value
  }

  api.post('/api/contactus', jsonData)
  .then((response) => {
    // 调用表单重置方法
    contactForm.value.reset()
  })
  .catch(() => {
    console.log('API request failed')
  })
}

这个reset()方法会自动把所有表单字段重置为它们的初始值（比如你绑定的ref初始值是空字符串，就会清空所有输入内容），同时还会重置表单的验证状态（清除错误提示等），完全不用手动逐个处理每个字段。

内容的提问来源于stack exchange，提问作者Qiuzman