Quasar q-form重置无法清空表单值的问题求助

问题原因 #

1. Quasar q-form 的 reset() 方法是将表单模型值重置为组件挂载时的初始值，如果你的表单变量（name、age、accept）在初始化时没有明确设置空/默认值（比如仅写 const name = ref() 而非 const name = ref('')），reset() 无法识别要重置的目标值。
2. 你在 onReset 中同时调用 reset() 和 resetValidation()，但 reset() 本身已包含重置验证状态的逻辑，重复调用无意义。
3. 按钮使用 type="reset" 会触发浏览器原生表单重置，这会和 Quasar 的表单逻辑冲突，导致值无法正确重置。

解决方案（推荐批量重置方案） #

步骤1：统一管理表单数据与初始值

将表单变量整理为一个对象，同时保存初始状态的深拷贝：

const formData = ref({
  name: '',
  age: null,
  accept: false
})
// 保存初始状态，避免后续修改影响重置逻辑
const initialFormData = JSON.parse(JSON.stringify(formData.value))

const sampleRef = ref(null)

步骤2：修改模板的v-model绑定

将所有表单组件的 v-model 绑定到 formData 的对应属性：

<q-form
  ref="sampleRef"
  @submit="onSubmit"
  class="q-gutter-md"
>
  <q-input
    filled
    v-model="formData.name"
    label="Your name *"
    hint="Name and surname"
    :rules="[ val => val && val.length > 0 || 'Please type something']"
  ></q-input>

  <q-input
    filled
    type="number"
    v-model="formData.age"
    label="Your age *"
    :rules="[
      val => val !== null && val !== '' || 'Please type your age',
      val => val > 0 && val < 100 || 'Please type a real age'
    ]"
  ></q-input>

  <q-toggle v-model="formData.accept" label="I accept the license and terms"></q-toggle>

  <div>
    <q-btn label="Submit" type="submit" color="primary"></q-btn>
    <!-- 改用普通按钮，避免原生重置冲突 -->
    <q-btn label="Reset" @click="onReset" color="primary" flat class="q-ml-sm"></q-btn>
  </div>
</q-form>

步骤3：实现批量重置逻辑

在 onReset 中批量恢复初始值并重置验证：

const onReset = () => {
  // 批量恢复表单初始值
  Object.assign(formData.value, initialFormData)
  // 重置验证状态（可选：若恢复值后验证状态未自动清除）
  sampleRef.value.resetValidation()
}

简化方案（依赖Quasar内置重置） #

如果不想维护初始值对象，只需确保表单变量在初始化时设置明确的空值：

const name = ref('')
const age = ref(null)
const accept = ref(false)
const sampleRef = ref(null)

修改重置函数与按钮：

const onReset = () => {
  sampleRef.value.reset()
}

模板按钮改为：

<q-btn label="Reset" @click="onReset" color="primary" flat class="q-ml-sm"></q-btn>

此时 q-form.reset() 会自动将所有绑定值重置为组件挂载时的初始空值，同时清空验证状态。

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