Agregué un q-select y obtuve mi formulario como un evento de envío. El evento de envío no funciona cuando hay un q-select. Pero sin el q-select funciona.
<q-form @submit.prevent="addNewRole" class="q-gutter-md"> <q-input v-model="newRoleForm.name" type="text" autofocus label="Role Name" color="info" required /> <q-select v-model="newRoleForm.accessLevel" :options="accessTypes" label="Access Level" color="info" /> <q-btn class="q-mt-lg" color="primary" icon="add_moderator" label="Add Role" /> </q-form> <script setup> const addNewRole = () => { alert("works"); }; </script>Debe eliminar el modificador .prevent , establecer el tipo de botón para submit , agregar un accesorio de rules a la q-input y definir los datos vinculados:
<template> <q-form class="q-gutter-md" @submit="addNewRole"> <q-input v-model="newRoleForm.name" type="text" autofocus label="Role Name" color="info" :rules="[ruleRequired]" /> <q-select v-model="newRoleForm.accessLevel" :options="accessTypes" label="Access Level" color="info" /> <q-btn type="submit" class="q-mt-lg" color="primary" icon="add_moderator" label="Add Role" /> </q-form> </template> <script> export default { data() { return { newRoleForm: { name: '', accessLevel: null, }, }; }, computed: { accessTypes() { return [ { value: 'full', label: 'Full access', }, { value: 'restricted', label: 'Restricted access', }, ]; }, }, methods: { ruleRequired(val) { return typeof val === 'number' ? true : (Array.isArray(val) ? val.length > 0 : !!val) || 'Required field'; } } } </script>Agregue el tipo de submit para el botón, también elimine la prevención de @submit.prevent
<q-btn type="submit" class="q-mt-lg" color="primary" icon="add_moderator" label="Add Role" />