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?
Related
I am doing this excercise in vue.js 2.6.
I have a toggled button that has two values: '1' or '2', and I made a computed that depending on these previous values return other values.
this returns either '1' or '2'
<v-col cols="12" sm="12" md="4" lg="4" xl="4">
<label>Toggle button</label><br />
<v-btn-toggle v-model="backendprop.prop1" color="blue" class="form-control p-0" dense borderless>
<v-btn v-for="option in BackendProp1" :key="option.value" :value="option.value">{{ option.label }}</v-btn>
</v-btn-toggle>
</v-col>
I want the value of this input to update according to computed setValueBecauseToggledButton
<v-col cols="12" sm="12" md="4" lg="4" xl="4">
<label>Value depending on Toggled Button</label><br />
<v-text-field
v-model="backendprop.prop2"
type="text"
disabled
outlined
dense
:value="setValueBecauseToggledButton"
/>
</v-col>
and this is the computed value:
computed:{
setValueBecauseToggledButton(){
return this.backendprop?.prop1?.toString() === '2' ? 'Valid prop' : ''
}
The behavior I expect is when I choose between the options of one input the other input should be updated.
Placing console.log in setValueBecauseToggledButton shows me that is working perfectly, but it does nothing on the v-text-field.
You could set a watcher on your property and then update the value for the v-text-field inside it.
<v-col cols="12" sm="12" md="4" lg="4" xl="4">
<label>Value depending on Toggled Button</label><br />
<v-text-field
v-model="backendprop.prop2"
type="text"
disabled
outlined
dense
/>
</v-col>
watch: {
'backendprop.prop1'(value){
this.backendprop.prop2 = value.toString() === '2' ? 'Valid prop' : ''
}
}
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 am very new to Vuetify and Vue.js. I am not sure how or why something is not working properly with my 2 date pickers closing when I select a date. Also, I grabbed this code from the online documentation/api at : https://vuetifyjs.com/en/components/date-pickers/
It's with the calendar closing after I select a value.
According to the documentation, close-on-content-click should be set to "true" if you want the calendar to close after user selects a value.
The online sample has close-on-content-click="false", yet the calendar closes after selection? Why and how?
On the page I'm developing, I have two date pickers. Both of them are set close-on-content-click="false". One of them closes after selection, one does not.
Why is the online sample closing when it shouldn't? And why is half of my code behaving improperly? I am confused. Am I missing something?
Relevant code below.
<v-row>
<v-col md6>
<v-menu
v-model="WhenStartedDate"
:close-on-content-click="false"
:nudge-right="40"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="newEvent.whenStartedDate"
label="Event Start Date"
prepend-icon="event"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="newEvent.whenStartedDate" #input="WhenStarteDate = false"></v-date-picker>
</v-menu>
</v-col>
<v-col md6>
</v-col>
</v-row>
<v-row>
<v-col md6>
<v-menu
v-model="WhenEndedDate"
:close-on-content-click="false"
:nudge-right="40"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="newEvent.whenEndedDate"
label="Event End Date"
prepend-icon="event"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="newEvent.whenEndedDate" #input="WhenEndedDate = false"></v-date-picker>
</v-menu>
</v-col>
<v-col md6>
</v-col>
</v-row>
One of your menus is behaving properly because you have a typo in one of the variables referenced in it. The other is not behaving properly because it has the correct variable name, and it's doing exactly what you tell it, which is to close the menu.
The value you pass to v-model acts as the open/closed state, and will potentially override close-on-content-click. You have two v-models attached to each menu: one called WhenStartedDate and one WhenEndedDate. You are setting them to false in each of the #input events in the two datepicker components, and doing this will forcibly close the two menus... but not quite, as there is a typo in one of them: #input="WhenStarteDate = false" is missing a "d". That's why that one is not closing, but the other is.
To keep both menus open after selecting a date, simply remove the two #input="..." handlers from the two v-date-pickers.
Example in codepen: https://codepen.io/mlillie87/pen/ZEQRamL?editors=1010
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'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