Challenges with Vuetify forms

I have created a popup form with modularity using Vuetify. However, I encountered an issue where clicking on the email input field, deselecting it to trigger an "empty" error, and then switching over to the register tab caused a similar error for the name field.

Upon investigation, it appears that the problem is related to the ordering of the text fields. For instance, if I purposely trigger an error in the password text field (which is in the 2nd position for the login form) and then switch to the register form, the second input field also displays an error.

example available at the following link

Access jsFiddle code here

vue.jsvuetify.jsvue-cli-3

Answer №1

It appears that the use of v-if with selectedTab is causing a change-notification, resulting in the validation of the second form (although it's unclear why only the first 2 fields are affected). Switching to v-show might be a more appropriate solution...

              <v-card-text v-show="selectedTab == 2">
                    <v-container>
                        <v-form ref="registerForm" v-model="valid" lazy-validation>
                            ...
                        </v-form>
                    </v-container>
              </v-card-text>
              <v-card-text v-show="selectedTab == 1">
                    <v-container>
                        <v-form ref="loginForm" v-model="valid" lazy-validation>
                            ...
                        </v-form>
                    </v-container>
              </v-card-text>

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

Retrieving specific data from nested arrays in Vue.js

I am currently working on Vue.js template development and facing an issue with filtering nested data in a faq section. When I try to add a search bar, the nested data array returns all data without proper filtering. Dom <v-container> <v ...

javascriptvue.jsvuejs2

What is the best way to reset an a-select component in Ant Design Vue?

I need to programmatically reset the selection in my a-select component after a specific event is triggered. Here's an example of my a-select code snippet: <a-select style="marginTop: 8px;width: 20%" @change="onChanged" > ...

javascriptvue.jsantd

Exploring the dynamic loading of components within routes

Just starting out with Vue and experimenting with vue-router, I'm trying my hand at dynamically loading components without relying on additional libraries like webpack. So far, I've set up an index page and a router. Upon initial page load, I not ...

javascriptvue.jsvue-componentvue-router

Using Highmaps in a VueJs application involves passing a state to the mapOptions for customization

I'm currently struggling with passing a vuex state to mapOptions in vuejs components. Here is the code snippet: <template> <div> <highcharts :constructor-type="'mapChart'" :options="mapOptions" class="map">&l ...

javascriptvue.jshighchartsvuex

Make sure to prevent losing the global status in Vuex and VueRouter when the page is refreshed

As I develop a Single Page Application (SPA), I am utilizing Vuex to manage session states on the client side. However, I have noticed that the state resets whenever the browser is manually refreshed. Is there a way to prevent this behavior without relying ...

javascriptvue.jsvue-routervuex

An object will not be returned unless the opening curly bracket is positioned directly next to the return statement

compClasses: function() { /* The functionality is different depending on the placement of curly brackets */ return { major: this.valA, minor: this.valB } /* It works like this, please pay attention to ...

javascriptvue.js

Employing DOM manipulation within Vue unit tests as a last resort

What steps should I take to update my unit test in order to accurately validate the following scenario? Method: close(event) { const element = !!event?.target?.closest('#target') if (!element) { this.isVisible = false } }, Jest test: ...

javascriptvue.jsjestjsvue-jest

Tracking and managing user clicks on external links within a vue.js application

I am currently working on a web application that retrieves data from a CMS. Utilizing the Vue-Router in 'history' mode, I need to address content fetched from the API which may include links. My goal is to manage specific links using the router w ...

javascriptvue.jsvuejs2vue-router

The pencil-drawn pixel on the canvas is positioned off-center

Currently, I am using p5.js to draw pixels on canvas with a pencil tool. However, I have encountered an issue where the pixel does not appear centered when the size of the pencil is set to 1 or smaller. It seems to be offset towards the left or right. Upo ...

javascriptvue.jsp5.js

Steps for inserting a new entry at the start of a dictionary

My fetch method retrieves recordings from the database, but I need to prepend a new record to the existing data for frontend purposes. Can someone assist me with this? <script> export default { components: { }, data: function() { ...

javascriptarraysvue.jsdictionary

Accessing store in Vue, the getter function returns a value representing whether the user is currently logged

I have the user state stored in my Vue store, but when I try to access it like this: let isLoggedIn = store.getters.isLoggedIn Instead of getting a simple true or false, I see this in the console: ƒ isLoggedIn (state) { return state.user ? true : false ...

javascriptvue.jsvuex

Invoking a nested method within Vue.js

I am facing an issue in my vuejs application with 2 methods. When I define method1 a certain way, it does not run as expected. method1: function(param1, param2){ // I can log param1 here thirdLib.debounce(function(param1, params2){ // It d ...

javascriptvue.jsvuejs2

The functionality of the Vueify modal seems to be malfunctioning when incorporating Vueify alongside a central Modal.vue file that houses modal templates

I've been experimenting with integrating this tutorial on creating reusable modal dialogs with Vuejs and adapting it for use with Vueify. Initially, I was able to successfully implement it, but after exploring a different approach briefly, I returned ...

javascriptphplaravelvue.js

vue-router default route for children

Currently, I am working on a Vue 2.x application and utilizing vue-router for routing purposes. In certain situations, I need to directly display a child vue. The template structure is as follows: | voice 1 | voice 2 | voice 3 | | submenu 1 | submen ...

javascriptvue.jsvue-router

Using a function as a prop in Vue js to retrieve data from an API

I am facing an issue with a component that I want to decouple from the data fetching implementation. My goal is to be able to pass a data fetching callback as a prop. The reason for this is so that I can easily mock the data fetching process in storybook. ...

javascriptvue.jsstorybook

What methods can be used in VueJS to restrict users from entering numeric values?

I am struggling to create a validation that prevents users from inputting numeric values into a textbox. I have tried using a native JavaScript solution, but it does not seem to be working on my end. In my textbox, I have set up this trigger v-on:keyup=" ...

javascriptvue.jsvuejs2

"Troubleshooting: NuxtJs vue-flip feature stuck on front side, not rotating to

I have recently installed the vue-flip plugin in a NuxtJs (VueJS) project that I created using the command: npx create-nuxt-app <project-name>. In the index.vue file, I simply added: <vue-flip active-click="true"> <div slot="front"> ...

javascriptvue.jsnuxt.js

Connecting Vue component data to external state sources

I am facing a challenge with integrating a Vue component into a large legacy system that is not based on Vue. This component retrieves data through AJAX requests and displays information based on an array of database record IDs, typically passed at page lo ...

javascriptajaxvue.jsvuejs2vue-component

How can you switch the property of an object in VueJS?

I am currently working with an array called cars, which contains names of cars as well as a property called starred. My goal is to toggle the value of starred between true and false for each car, ensuring that only one car can have starred set to true at a ...

javascriptvue.jsvuetify.js

Let the Vuejs transition occur exclusively during the opening of a slide

Trying to implement a smooth transition when the toggle button is clicked. Successfully applied the transition effect on the slider, but struggling to animate the text inside the div.hello class upon sliding open. <transition name="slide"> <a ...

javascriptvue.jsvuejs2