含q-select的q-form提交事件失效问题排查

核心原因 #

你的q-btn未设置type="submit"属性，默认类型为button，不会触发表单的submit事件。移除q-select后能正常提交，是因为焦点在q-input上时按回车键会触发表单默认提交行为；而页面存在q-select时，要么焦点切换后回车无法触发，要么你习惯点击按钮而非回车，才会误以为是q-select导致的问题。

修复步骤 #

1. 给q-btn添加type="submit"属性，明确它是表单提交按钮：

<q-btn
  class="q-mt-lg"
  color="primary"
  icon="add_moderator"
  label="Add Role"
  type="submit" <!-- 新增该行 -->
/>

2. 额外检查（可选）：确保q-select的v-model有初始值，避免隐性验证阻止提交。比如初始化newRoleForm时给accessLevel赋值：

const newRoleForm = reactive({
  name: '',
  accessLevel: '' // 或设置为accessTypes数组中的某一项值
})

验证效果 #

修改后点击按钮即可正常触发addNewRole方法，无论是否保留q-select组件。

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