I have added a q-select And I gate my form a submit event. Submit event not working when there is a q-select.But without the q-select it is working.
<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>
You should remove the .prevent modifier, set the type of the button to submit, add a rules prop to the q-input and define the binded data:
<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>
Add type submit for the button, also remove prevent from @submit.prevent
<q-btn
type="submit"
class="q-mt-lg"
color="primary"
icon="add_moderator"
label="Add Role"
/>