I've developed a modular popup form using Vuetify, but when i click the email input field and deselect to cause an "empty" error, and then switch over to the register tab, it then causes a "empty" error to the name field.
It seems the issue is linked to the ordering of the text field, because if i then cause the error for my password text field (2nd position for login form), then switch to the register form, the second input field prompts an error.
example in link
js fiddle code
I think the v-if for the selectedTab is triggering a change-notification, so the 2nd form validates (although I don't know why it's only the first 2 fields). Instead, use v-show...
<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>
https://codeply.com/p/9NtOj5QrPe
Related
I'm a complete beginner to Vue and I have an extremely basic question that is tripping me up.
I have a Dialog that opens up and asks for user input. When the user clicks okay, it makes a call to an API and tries to add the user input to a database. This works fine and I'm able to successfully hit the database. The issue I'm having is if the API doesn't return a 200. I want to persist the dialog and add text that says "Invalid Input. Try again." However, everything I've tried just closes the dialog automatically.
The code I have looks like:
<v-dialog v-model="show" width="500">
<template v-slot:activator="{ on, attrs }">
<v-btn text color="green" v-bind="attrs" v-on="on"> Add User </v-btn>
</template>
<v-card>
<v-card-title class="text-h5 grey lighten-2"> Add User </v-card-title>
<v-spacer></v-spacer>
<v-card-text>
<v-text-field label="User to add" v-model="addUser"></v-text-field>
</v-card-text>
<!-- <v-card-text v-if="successfullyAdded == false"><strong class="red--text text--lighten-1">Please input a valid username</strong></v-card-text> -->
<v-spacer></v-spacer>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
#click="
show = false
addUser(index)
"
>
Add
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
How do I persist a dialog conditionally such that it stays open if addUser returns False and otherwise closes normally?
I have a "Add Task" form with required fields (name, description, etc.). Here's a relevant snippet of it:
<v-form ref="form">
<v-row class="mx-5">
<v-col cols="12" sm="6">
<v-autocomplete clearable outlined v-model="task.full_name" :items="students" :item-text="'name'" :item-value="'name'" :name="'name'" label="Full name*" :rules="required" return-object #change="setPhoneNumber"></v-autocomplete>
</v-col>
<v-col cols="12" sm="6" md="6">
<v-autocomplete clearable outlined #change="checkLocation" v-model="pickedLocation" :items="locations" label="Location*" :rules="required"></v-autocomplete>
</v-col>
Once the task is added successfully, in a getter function I update several things and reset the form:
this.color = 'success'
this.added = true
this.isPressed = false
this.dialog = false
this.$refs.form.reset()
this.fetchTasks()
All the input boxes are indeed reset - they are empty and there are no validation errors. All but one. The "Full name" box (the first in the snippet above) is empty, but the box is red, indicating a validation error. I have no idea why the validation on this specific input box is raised, even though I reset the form. Any ideas?
i am using v-autocomplete with autofocus.
<v-autocomplete
autofocus
solo
rounded
prepend-inner-icon="mdi-magnify"
#keyup.enter="showFilteredItems"
id="searchInput"
:items="stocks"
item-text="symbol"
item-value="name"
:filter="customFilter"
ref="autocomplete">
<template v-slot:item="data">
<v-btn block depressed :to="`/stock/${data.item.symbol}/`">
<v-list-item-title v-html="data.item.symbol"></v-list-item-title>
<v-list-item-subtitle v-html="data.item.name"></v-list-item-subtitle>
</v-btn>
</template>
</v-autocomplete>
the autocomplete work correctly when user click on it and then type the input:
but when user type the input without clicking on v-autocomplete, v-menu does not appear :
however relative events emitted as expected and items are filtered.
surprisingly i tried the same code in vue (not nuxt) and it works properly!
I think you can use :
:input-attrs="{'autofocus':true}"
like question below:
https://github.com/paliari/v-autocomplete/issues/27
I have the following Vuetify form with single v-text-field and a button:
<v-form v-model="valid" ref="form" #submit.prevent>
<v-container>
<v-layout>
<v-flex
xs12
md8
>
<v-text-field
v-model="name"
:rules="nameRules"
:counter="max"
maxlength='max'
:label="$t('Save new name')"
required
clearable
#keyup.enter.prevent='onEnterPressed'
></v-text-field>
</v-flex>
<v-flex
xs12
md4
>
<v-btn
:loading="saving"
:disabled="!valid || saving"
color="info"
#click="processNewName"
>
<v-icon left dark>fa-save</v-icon>
{{ $t('Save') }}
</v-btn>
</v-flex>
</v-layout>
</v-container>
</v-form>
Currently these are my methods:
onEnterPressed() {
console.log('enter pressed');
},
processNewName() {
...
}
I'm using #submit.prevent to stop refreshing the page when the Enter button is hit.
So far everything seems to be working. However, when I hit the enter button, in the console I'm getting this error message:
Uncaught TypeError: Cannot read property 'type' of undefined
at e.setFieldValue (onloadwff.js:71)
at HTMLFormElement.formKeydownListener (onloadwff.js:71)
In onloadwff.js the error points to the following code:
if("password"===r.type)
So r is undefined. How can I prevent this from happening? I already tried to use #keyup.enter.prevent.native, tried #keydown.enter.prevent, tried to point #submit.prevent to processNewName method... This error keeps showing up.
I checked in Vuetify site the v-text-field component, and it seems that sometimes they also get this error in some of their examples, but not all of them. But I can't figure out what to do to prevent this from happening. Any ideas?
EDIT
Upon further investigation I fount out that onloadwff.js belongs to LastPass plugin. Checked in different browser without that plugin and saw everything works just fine.
This error comes from your LastPass plugin and it is discussed on Github on various frameworks:
vuejs/vue-cli
KillerCodeMonkey/ngx-quill
mui-org/material-ui
SAP/openui5
It's not the best solution, it's more like a workaround, but for now I either:
Disable LastPass
Avoid using <v-form>
I am using Vuetify and VueJS (the latest versions).
Here is the small template of Login.vue:
<template>
<v-layout align-center justify-center>
<v-flex xs12 sm8 md4>
<v-card class="elevation-12">
<v-toolbar dark color="success">
<v-toolbar-title>Login form</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form #submit.prevent="checkLogin">
<v-text-field prepend-icon="person" id="userLogin" v-model="userLogin" placeholder="my#login.com"></v-text-field>
<v-text-field prepend-icon="lock" id="userPassword" v-model="userPassword" placeholder="password" type="password"></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<!-- TODO fix the bug when form.submit not works -->
<v-btn type="submit" color="success">Login</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</template>
So, if you see, there is an #submit.prevent on v-form with checkLogin call and it is not working while clicking the submit buttor nor hitting the enter button while in input. Using #submit without prevent also has no effect.
But! If I put event handler on the v-btn like this:
<v-btn #click.native="checkLogin">
after clicking the button (not hitting the enter in input fields) all works as expected.
So, can you please tell me, what am I doing wrong with the v-form submition event handling?
Thank you!
Your submit button isn't inside the form so it's not triggering a submit event.
Either re-structure your markup or try setting an id on the form and use the form attribute on the button, eg
<v-form #submit.prevent="checkLogin" id="check-login-form">
and
<v-btn type="submit" color="success" form="check-login-form">Login</v-btn>
Note: The form attribute does not work for any version of Internet Explorer.