有 q-select 时提交不起作用

Question

我添加了一个 q-select 并且我将表单设置为提交事件。 有 q-select 时提交事件不起作用。但没有 q-select 它正在工作。

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

Answer 1

您应该删除.prevent修饰符，将按钮的类型设置为submit ，将rules属性添加到q-input并定义绑定数据：

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

Answer 2

为按钮添加类型submit ，同时从@submit.prevent中删除阻止

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