[V4]

[bjornnorlen]

What happened?

Vue: 3.2.13 Vee-validate: 4.5.11 Vuetify: 3.0.0-beta.9

We are using vee-validate in our solution to verify field input but we have come across a weird bug. In our solution we are using Vuex for handling field states which are used for saving the user's data when moving between conditional rendering of fields. However, when the user has entered a value in a field that has been conditionally rendered, then the state of that field might be something else the next time the user views that field. We are using Vue 3 composition API with the

For example, in the image below we have a three radio buttons. If the user clicks the first alternative, then a textfield will be rendered underneath it. If the user clicks alternative 2 then another textfield will be rendered and if the user clicks alternative 3 nothing will happen. Both fields from checking alternative 1 and 2 use the same components but they receive different id:s and names when rendered in the html.

If the user checks alternative 1 then textfield 1 is shown. Under the textfield I'm at the moment writing out the field object which is returned by vee-validate by using v-slot (code further below) and I'm also printing the value which is retreived from th state and returned by our composable. Since I haven't entered anything in the field yet, the value is empty:

If I write any text into the field the value will be changed and the component is emitting an event so that the value is set in the state (the computed property in the image further below):

If I then change to alternative 2 in the radio button, another textfield is shown and here the first weird thing happens. The field object returned by vee-validate when choosing alternative 1 had a valu-property set to an empty string but when choosing alternative 2 that property isn't available:

If I then enter text into the field the value property is available:

However, if I go back to alternative 1 and then select alternative 2 again we get the correct value that has been set in the state but the value property in the field object returned from v-slot is gone. Also, if I had choosen alternative 2 directly after page refresh then the value property in the object would be available but it would dissapear when changing to alternative 1 and then back to alternative 2:

If I already have entered a value into textfield 2, then check alternative 3 and then go back to alternative 2 the field object is correct:

I should also say that the field object returned by vee-validate when checking alternative 1 is always correct and always contains the value property in the field object, no matter in what order I select the other alternatives:

Our FieldTextBox.vue component is using the <Field> tag from vee-validate. We use v-model on the Field tag and binds it to our value which is returned from our state and the Field returns a field, errors and meta object through v-slot:

In our FieldTextBox.vue component we use a composable to get and set the value in the state. The value property below is what we use to bind to vee-validates <Field> tag above:

In our composable we get and set value which is returned further below. If we set the value we are emitting an event to our parent component so the value is saved to our state:

The project is built so that admins can build their own forms with different kind of fields and so we are using the vue tag to render the correct fields in the form:

Reproduction steps

...

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [X] Firefox
• [X] Chrome
• [ ] Safari
• [X] Microsoft Edge

Relevant log output

No response

Demo link

No demo link

Code of Conduct

• [X] I agree to follow this project's Code of Conduct