Vee-validate: Trouble implementing ValidationObserver/ValidationProvider with Vuetify `value`/`@input`

[JessicaOPRD]

Hello, I am struggling to achieve manual validation with these components. I am admittedly fairly new to all of these tools, and this may be a matter of configuration.

Works with v-model

https://codesandbox.io/s/189542w1q7

Both rules and flags work as expected in this example.

Fails with value and @input

https://codesandbox.io/s/pw4kqwoy4j

Things that go wrong in my attempt:

• required rule never creates an error Fixed with use of @input.native
• touched is never flagged true
• pristine is always flagged true
• max rule gets "stuck" if user enters too much text, selects all, and deletes Fixed with use of @input.native

Does anyone know a safe/intuitive way to trigger a dirty and touched state?

Thank you very much!

[logaretm]

The public API has a setFlags method which you can use to update the input state as you see fit, it is a little bit manual but it is the only way for now. I have added it to the docs as it wasn't present before

To explain what is going on: because you are not using v-model vee-validate does not know which component/element you want to validate so v-model acts as a marker for the Provider component to be able to tell which element to validate and to listen to.

I have updated your example in this fork here.

[JessicaOPRD]

Thank you so much!

I'm working my way through different form elements and am now struggling to implement value and @input using Vuetify's v-select component. The problem appears to be that there is no @change.native event for v-select, which may be a Vuetify problem (or decision)?

Works with standard HTML select

https://codesandbox.io/s/x9565x17vp

Fails with Vuetify v-select component

https://codesandbox.io/s/mz5nkxr3kx

I've attempted to find a workaround by manually invoking:

this.$refs.validator.validate(v)

However I could not get this working. Clearing the selected option (v is undefined) never triggers required. Perhaps I'm invoking at an incorrect time/place?

Thank you!

[logaretm]

Looks like you stumbled upon a bug, sorry about that.

There is a workaround though. You could use provider.syncValue to force the validator value to be set to undefined as it currently ignores it on validate.

Here is the example: https://codesandbox.io/s/lx50jm09p7

I fixed this here. I will do a patch release in a couple of days, again sorry about that.

[JessicaOPRD]

Thank you for your efforts, this is working for me and I will look for that fix! :)