Preventing v-stepper-step header click in Vuetify.js when form is invalid

I'm using Vuetify's v-stepper component.

What I'm trying to achieve is:

  • When a user clicks on a stepper step in the header, I want to block the click event if the active form is not valid.

I have been able to accomplish this by attaching the click listener to the span element:

<v-stepper-step :key="step.id" :step="step.id" :rules="[() => !!step.valid]" :editable="currentStepId !== step.id && currentStep.valid">
  <span @click="headerClick" v-html="step.name"></span>
</v-stepper-step>

While this method works well and cancels the click event as intended, it only applies to the label and not the entire clickable area.

I would like the entire stepper-step button to trigger this behavior. However, attaching the click listener to the v-stepper-step itself is too late to cancel the click event using e.stopPropagation.

Is there a way for me to achieve this?

Here is a live demo for reference.

Thank you!

javascriptvue.jsvuejs2vuetify.jsv-stepper

Answer №1

It seems a little unclear about your exact intentions, but by adding @click to the entire <v-stepper-header> element, the headerClick function will function in the same way as if the click was on the label. This means you can click anywhere on the header (assuming that's what you mean by "the full clickable area").

  <v-stepper-header @click="headerClick">
    <template v-for="step in steps">
      <v-stepper-step :key="step.id" :step="step.id" :rules="[() => !!step.valid]" edit-icon="$complete" :complete="currentStepId > step.id" :editable="currentStepId !== step.id && currentStep.valid">
        <span class="v-stepper-step-clickable" v-html="step.name"></span>
      </v-stepper-step>
      <v-divider :key="`divider-${step.id}`" v-if="step.id < lastStep"></v-divider>
    </template>
  </v-stepper-header>

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

Calculating the mean value of a multidimensional array that has been sorted in JavaScript

Check out the structure of my JSON File below. { "questions": ["Question1", "Question2"], "orgs": ["Org1", "Org2", "Org3"], "dates": ["Q1", "Q2", "Q3"], "values": [ [ [5, 88, 18], [50, 83, 10], ...

javascriptarrays

Encountering difficulties with integrating map controls into the Nuxt3/Vue3 mapbox feature for zooming

Recently, I started exploring Mapbox within my new Nuxt3 application. I managed to successfully render the map in my custom Map.vue component. However, I am facing trouble when trying to add controls and other options. Despite my efforts, I can't see ...

vue.jsnuxt.jsmapboxmapbox-gl-js

"Embracing Progressive Enhancement through Node/Express routing and the innovative HIJAX Pattern. Exciting

There may be mixed reactions to this question, but I am curious about the compatibility of using progressive enhancement, specifically the HIJAX pattern (AJAX applied with P.E.), alongside Node routing middleware like Express. Is it feasible to incorporate ...

javascriptajaxnode.jsexpressprogressive-enhancement

When working on a MEAN web application, encountering HTTP responses like 403 or 500 from the Express server can sometimes go unnoticed and not be properly handled in the errorCallback function within

Within my Node web app, there is a situation where an HTTP GET request is sent in one of the Angular controllers. At the same route defined in Express, somewhere in the route logic, an HTTP 500 response (also tried 403 Error) is also being sent. However, i ...

javascriptangularjsnode.jsexpress

Attempting to route a selector, yet on the second attempt, the entity is successfully transferred

I am currently working on developing a function that will switch the image every half second for 10 iterations. During the final iteration, the image src will be set to the actual value. Everything seems to work fine for the first loop, however, when the s ...

javascriptjquery

Is there a way to disable auto rotation on a website when accessed from a mobile phone?

My current solution involves the following code: @media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { html{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(- ...

javascripthtmlcssfrontendscreen-rotation

Locate the word or phrase without a comma

I am currently working on a code that involves finding keys with string values separated by commas. var db = { "name": "Nkosana", "middle": "Baryy", "surname": "walked", "batch_number": "test,b", "temp": ",,67,6,87,86,5,67865,876,67" ...

javascriptjquery

Manipulating DropDownList Attributes in ASP.NET using JavaScript

I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...

javascripthtmlasp.netajax

Troubleshooting issue with Bootstrap collapse functionality failing with dynamic IDs

Having trouble creating dynamic ids for bootstrap collapsing functionality. I want each topic in an ng-repeat to collapse and display its respective question list when clicked. The issue is that when I click on a second topic, the question list data from ...

javascriptangularjstwitter-bootstrap

Hiding the modal once the data has been successfully transmitted to the database

I am facing a challenge in my app where I need to close the modal after sending data to the database, but no matter what I try, I cannot seem to achieve it. Can anyone provide some guidance or assistance with this? :) <div class="container-fluid"&g ...

phplaravelvue.js

Vue-Router with dynamically created route redirects for Server Side Rendering (SSR)

Our system is designed to handle various types of profile pages, such as user profiles and company profiles, each with its own template. However, the URLs for these profiles do not differentiate between the types. All URLs follow this format: mysite.com/{{ ...

vue.jsvuejs2vue-router

Strategies for Transmitting Multiple Data Fields to a VueX Store

Creating multiple rating fields using v-for can be done in the following way: <div class="ratings"> <div class="rating" v-for="rating in applicationViewCv.jobPostRatingFields" :key="rating.id"> <label :for="rating.id"> ...

vue.js

Receiving a 401 error while attempting to make an axios get request with authentication headers

I have been utilizing axios in my React project to fetch data from MongoDB. However, I am facing a challenge with the axios get requests returning a 401 error when I include my auth middleware as a parameter. This middleware mandates that the user must pos ...

javascriptreactjsexpressaxiosjwt

Automatically fill in Vue files

Is there a quick way in Vue to automatically populate an empty file with the template, script, and style tags along with default content? For example, in VS Code you can use the shortcut ! + Enter to insert all necessary HTML tags/codes. I'm wonderin ...

vue.jsvisual-studio-codevetur

Is there a way for my JavaScript file to manipulate an EJS variable?

In the index.ejs file, I declared an ejs variable named "complete" which verifies whether a user has completed a journal entry by using the following code: <% if (complete == false) { %> <button class="new_journal">Fill Out Journal<i cla ...

javascriptnode.jsejs

Protractor: What is the best way to retrieve the baseUrl from the command line input?

How can I retrieve the baseUrl that was passed through the command line in Protractor? For example: protractor conf.js --baseUrl=http://myawesomesite.com I attempted to use browser.baseUrl to access the baseUrl set in my conf.js file, but it does not see ...

javascriptselenium-webdriverprotractor

Setting the height of Material-UI TreeView

Looking for advice on how to set a fixed height or dynamically adjust the height of a material-ui TreeView to fit the display? https://i.sstatic.net/40Qlv.png I'd like a scrollbar to appear when the TreeView content reaches a height of 100 pixels, f ...

javascriptreactjsmaterial-uitreeview

Is there a way to eliminate the border of an image attribute pulled from an input field?

Seeking assistance with a persistent issue I'm facing. I have an input for an image and a script to display the selected image. However, when the input is empty, a frustrating black border appears around the image attribute. How can I remove this bord ...

javascripthtml

Emphasize sections of text within a chart

Looking for a Specific Solution: I've encountered similar problems before, but this one has a unique twist. What I'm trying to achieve is to search for a substring within a table, highlight that substring, and hide all other rows (tr's) th ...

javascriptjqueryhtml

Is there a way to listen for the validation of an HTML5 form before it is submitted?

I've been trying to figure out a way to detect if a form has been validated, but so far, no luck. For example: User clicks the submit button The form is invalid, so the submit event doesn't occur At this point, I want to add the class .form-fe ...

javascriptjqueryhtml