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" >
       <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
        
        color="primary"
        icon="add_moderator"
        label="Add Role"
      />

   </q-form>

<script setup>
const addNewRole = () => {
  alert("works");
};
</script>

CodePudding user response：

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  @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"
    
    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>

CodePudding user response：

Add type submit for the button, also remove prevent from @submit.prevent

 <q-btn
   type="submit"
   
   color="primary"
   icon="add_moderator"
   label="Add Role"
 />