Issue with submitting form using q-select

After incorporating a q-select element into my form, I noticed that the submit event is not triggering. Strangely, when I remove the q-select element, the submit event works as expected.

    <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("It's working now!");
};
</script>
javascriptvue.jsquasar-framework

Answer №1

If you want to improve the functionality of your button, consider making a few adjustments:

<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

Make sure to set the type of the button to submit, and do not use prevent in @submit.prevent

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing custom i18n blocks for Vue 3 and Vuetify 3 to enhance locale messages

Looking to localize messages separately for each component? Check out this example for Vue 2. But how can it be done for Vue 3 and Vuetify 3? Here's what I've tried: package.json "dependencies": { "@mdi/font": "6.5 ...

javascripttypescriptvue.jsvuejs3vue-i18n

Is an empty string equivalent to false in a boolean context?

I would appreciate further clarification on this subject. I have read several articles, but none have fully answered my questions. ...

javascriptreactjsvariables

Node.js application with decoupled Redis client

In my node.js app, I am utilizing Redis for user caching. Once a user logs in, their information is cached and accessed on subsequent requests to determine their access level. This allows the client to receive personalized information and views based on th ...

javascriptnode.jsexpressredis

Verify whether an image is present without actually displaying it

I am currently integrating a script for hover-functionality: function VerifyImage(url) { var httpRequest = new XMLHttpRequest(); httpRequest.open('HEAD', url, false); httpRequest.send(); return httpRequest.status != 404; } The c ...

javascriptjqueryajaxxmlhttprequestloading

Unraveling unicode escape sequences in JavaScript strings

My code includes a string like \uC88B\uC544\uC694. When I use this string in a node repl (v7.4.0), it displays '좋아요' correctly. However, when I try to use the same string in the following code snippet, it does not work as ex ...

javascriptnode.js

Create a self-bot that can generate a new server

I am currently working on a discord.js self-bot and I need assistance in creating a server. Any guidance would be greatly appreciated. I have experimented with the client.user method, but did not achieve the desired result. If it is not possible to c ...

javascriptnode.jsdiscord.js

Issue occurs when nested functions prevent the data() variable from updating

As a newcomer to VUE, I may not be using the right terminology so bear with me. I'm attempting to update a variable that is defined in the script tag's "data()" function. The issue arises when trying to change the value of a variable within the ...

javascriptvue.js

Leverage JSON files for pagination in NextJS

I am currently developing a science website where the post URLs are stored in a static JSON file. ScienceTopics.json- [ { "Subject": "Mathematics", "chapters": "mathematics", "contentList": [ ...

javascriptreactjsjsontypescriptnext.js

Transferring an Array into an Object within an Object Using Angular

I'm currently diving into Angular and I decided to tackle angular.copy with a simple example. My goal is to create an Object using a Service, and then create a new Object that only contains certain elements from the original Object. Check out the ful ...

javascriptarraysangularjsangularjs-ng-repeatangularjs-factory

Is there a permanent solution to fixing the error code -4094 that is repeatedly occurring during React Native startup?

When attempting to execute react-native start, an error occurred which has not been encountered before. The error message is as follows: ERROR ENCOUNTERED Loading dependency graph...events.js:287 throw er; // Unhandled 'error' event ...

javascriptnode.jsreactjsreact-nativenpm

Detecting duplicate key values within a JSON array using Angular.js

I am seeking a solution in Angular.js to verify if duplicate key values exist within a JSON array. Below is a breakdown of my code: var result=[{ "email":'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8dac8b ...

javascriptangularjsjson

React typescript props not appearing as potential defined, even after implementing the '?' optional operator and '| undefined'

I've noticed that my linter has suddenly stopped flagging potentially undefined properties passed into my React components. For instance: interface BooleanTypeObject { prop1: true } interface MyComponentProps { disable ...

javascriptreactjstypescript

Guide on getting a website name from a URL using Javascript

Is there a simple method to extract the site name from a URL string? For example: http://www.mysite.com/mypath/mypage -> www.mysite.com http://mysite.com/mypath/mypage -> mysite.com The JavaScript code runs on the mongodb CLI side, not within ...

javascriptnode.jsmongodbserverside-javascript

Why does VS Code fail to automatically close brackets, parentheses, and square brackets in Vue files?

Has anyone else experienced an issue in VS Code where the closing symbol does not appear when typing the first bracket, square bracket, or parentheses while editing .vue files? ...

vue.jsvisual-studio-code

Tips for storing a GET response in a variable using ExpressJS and LocomotiveJS

I am currently navigating the world of NodeJS and have successfully developed an app using ExpressJS and LocomotiveJS framework. I am now faced with a challenge: how do I store a particular GET response in a variable within a controller? For instance: fil ...

javascriptnode.jsexpresslocomotivejs

Spin a ThreeJS Object3D along a slanted Y axis

I've experimented with various methods to tilt my object and then rotate it around this newly tilted axis, but no matter what I attempt, it always rotates as if the Y axis is pointing straight up. It fails to rotate along the newly tilted axis. WHY? ...

javascriptthree.js

What is the process for incorporating a glossiness / specular texture onto a GLTF model?

QUERY: I currently possess a specular/glossiness texture image for a model that has not yet been integrated into the GLTF model. Is there a way to incorporate/add this texture to my model in order to achieve a reflective/glossy appearance where required? ...

javascriptjsonthree.jstexturesgltf

Eliminate elements from an array within a promise

I am facing an issue with the currentBillCyclePath parameter in the following function. I need to use this parameter to filter out certain elements after executing the query. However, inside the while loop, the value of currentBillCyclePath is undefined. ...

javascript

How can you target a specific data-target button while working with multiple Bootstrap collapse elements?

One challenge I'm facing is with the Bootstrap collapse elements on my website. I have several of them, each controlled by a read-more button that includes an icon to indicate the state of the collapse element. However, when I add a class to the butto ...

javascriptjquerytwitter-bootstrapbootstrap-5

What is the best way to manage the login notification?

Is there a way to close the alert or input the UserId and password and then click on Login? Here is the code for the alert This is how the alert appears I could use some assistance in managing this alert ...

javascriptjavaseleniumautomated-tests