I am trying to add vee-validate rule on Validation Provider of password and confirm password. v-validate must be working where I had to add rules to a textbox. But here in my case, I must have to use Validation Provider. Please help!!!
Versions
vee-validate: 2.1.7
vue: 2.9.6
Code
<ValidationObserver ref="adminInfo">
<v-layout row wrap>
<v-flex xs12 md6>
<ValidationProvider name="password" rules="required|min:5|max:35" ref="password">
<v-text-field
solo
v-model="administratorInfo.newPassword"
label="Set New Password"
required
slot-scope="{
errors,
valid
}"
:error-messages="errors"
:success="valid"
></v-text-field>
</ValidationProvider>
</v-flex>
<v-flex xs12 md6>
<ValidationProvider name="confirm password" rules="'required|confirmed:password'">
<v-text-field
solo
v-model="administratorInfo.cNewPassword"
label="Confirm Password"
required
slot-scope="{
errors,
valid
}"
:error-messages="errors"
:success="valid"
></v-text-field>
</ValidationProvider>
</v-flex>
</v-layout>
</ValidationObserver>
Getting error:
Cannot read property '$watch' of undefined
Finally found solution by replacing ref="password" to vid="password". Found solution here.
But I did not understood what is and why vid?
This might be unrelated but make sure you have a v-model in your ValidationProvider of confirm password
In case someone is looking for how to pass vid when rules are an object:
<validation-provider :rules="{ required: true, max: 100, confirmed: 'confirmar' }" v-slot="validationContext"> </validation-provider>
Related
I'm trying to change the UI element from <v-card-text> to <v-text-field> read-only. While doing so, I face some challenges. This is used to work
{{ displayType(campaign.type_name) }}
but not they don't. I got error Errors compiling template:
<v-text-field
outlined
small
value="{{ displayType(campaign.type_name) }}"
label="Type"
readonly
></v-text-field>
Try this instead
<v-text-field
outlined
small
:value="displayType(campaign.type_name)"
label="Type"
readonly
></v-text-field>
I have some problem with vee-validate, vuetify and v-for.
There is my code :
<ValidationProvider
name="availableLanguages"
rules="required"
v-slot="{ errors }"
>
<v-row>
<v-col
cols="2"
v-for="availableLanguage in availableLanguages"
:key="availableLanguage.label"
>
<v-checkbox
v-model="selectedLanguage"
:label="availableLanguage.label"
:value="availableLanguage.value"
:error="errors.length > 0"
hide-details
#click="setDefaultLanguage"
key="availableLanguage-input"
/>
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
class="errorCheckBox"
>
{{ errors[0] }}
</v-col>
</v-row>
</ValidationProvider>
What is the expected result ?
I have a checkbox group. I want if all checkboxes are unchecked then an error message appear.
What's happened ?
If i don't click once on the first iteration of the v-for loop, the error is not trigger.
Thanks for help.
By default, the Validationprovider doesn't validate as soon as form is rendered, but only does it when the field has been touched. You can use immediate prop to make the field be validated when rendered:
<ValidationProvider
name="availableLanguages"
rules="required"
immediate
v-slot="{ errors }"
>
I have two inputs from which the first one is a switch and the second one is a text field which gets conditionally displayed if switch is set to true.
In situation when user sets the switch to true and then enters something in the text box the v model value for this input needs to be reset / removed when user sets the switch to false again.
I know I can achieve this manually or by using watcher. However just curious if I have missed something in the docs which will do this for me or may be a better method than what I think is the only way.
<v-row>
<v-col cols="12" sm="12">
<v-switch
v-model="data.budget_confirmed"
label="Budget Confirmed"
color="primary"
class="ma-0 pt-0"
hide-details
/>
</v-col>
<v-col v-if="data.budget_confirmed === true" cols="12" sm="12">
<validation-provider v-slot="{ errors }" name="Amount" rules="required">
<v-text-field
v-model="data.amount"
name="amount"
label="Amount"
:error-messages="errors"
:hide-details="!errors.length"
outlined
dense
/>
</validation-provider>
</v-col
</v-row>
Listen for the change event on the switch:
<v-switch
v-model="data.budget_confirmed"
label="Budget Confirmed"
color="primary"
class="ma-0 pt-0"
hide-details
#change="onSwitchToggle"
/>
Then in the onSwitchToggle method, reset amount when the switch if off:
onSwitchToggle () {
if (!this.budget_confirmed) {
this.amount = 0;
}
}
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 have inherited an existing app written in Vue/Vuetify and it has an existing v-textarea element that I am trying to modify. The issue is that we now want to pre-populate this element with sample text that the user can edit to their needs. I have tried adding value and placeholder properties to the v-textarea element and not gotten the sample text to show in the v-textarea.
Here is the dialog that contains the troublesome v-textarea:
<v-dialog v-model="dialogAddComment"
hide-overlay
persistent
max-width="600px">
<v-toolbar card color="blue-grey lighten-4" dense elevation="16">
<v-toolbar-title color='black' class="body-2 ml-3">Add Comment</v-toolbar-title>
<v-spacer></v-spacer>
<v-icon #click.stop="closeDialogAddComment">close</v-icon>
</v-toolbar>
<v-form ref="form" v-model="valid" lazy-validation>
<v-card>
<v-flex>
<v-layout column>
<v-flex xs12 sm6 d-flex mx-3>
<v-select
:items="engagement.allIncidentTypes"
item-text="incidentCategoryText"
item-value="incidentCategoryKey"
label="Category"
:rules="[v => !!v || 'Category is required']"
required
v-model="incident.incidentCategoryKey"
></v-select>
</v-flex>
<v-flex xs12 sm6 d-flex mx-3>
<v-select
:items="zeroTo8"
label="Impact (Hours)"
:rules="[v => (v === 0 || v <9) || 'Impact is required']"
required
v-model="incident.numberOfHours"
></v-select>
</v-flex>
<v-flex xs12 sm6 d-flex mx-3>
<v-textarea
name="input-7-1"
label="Comment"
:rules="[v => !!v || 'Comment is required']"
required
v-model="incident.incidentFreeText"
counter=1024
maxLength=1024
rows=3
value='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
></v-textarea>
<!-- -->
</v-flex>
</v-layout>
</v-flex>
<v-card-actions>
<v-spacer/>
<v-btn :disabled="!valid" color="primary" small #click="addIncident">Submit</v-btn>
<v-spacer/>
</v-card-actions>
</v-card>
</v-form>
</v-dialog>
I have tried setting the placeholder and value properties and seen nothing. I initially tried setting a text property but then found the documentation on the vuetify.js site. They even have a simple example that does exactly what I want to do. But my implementation is not working. and I am stumpped!
You should not set both v-model and value at the same time.
One possible solution is removing v-model and update incident.incidentFreeText in #input event
<v-textarea
name="input-7-1"
label="Comment"
:rules="[v => !!v || 'Comment is required']"
required
counter=1024
maxLength=1024
rows=3
value='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
#input="onInput"
>
</v-textarea>
methods: {
onInput(value) {
this.incident.incidentFreeText = value
}
}
Another possible solution is keeping v-model, remove value, but you need to set
this.incident.incidentFreeText='U Good lockers\nV Damaged lockers\nW Lockers replaced\nX (=U+V+W) Lockers installed\nY Lockers returned to warehouse'
somewhere in your code.