Vee validate 4 with options API question

[darkopetreski]

Since the composition API in vue 3 is optional I am still using the options api with the data. I cannot find in the documentation if I cat still easily use vee validate to be bound directly with the data varialbes as in the vee-validate v3 ? As I can see in the docs, everywhere is used setup() with initial state variable, but since I do not use setup, I need to somehow bound initial state to the data variables without changing the data itself. Thank you.

[logaretm]

I migrated this as a discussion because this is the proper section for it. Please try to keep issues reporting for actual issues.

The examples actually use the options API as much as possible, only the useField and useForm are used in the setup function.

Which example are you referring to specifically? You can use the data with v-model to set your initial values.

[darkopetreski]

Thank you, sorry I did not notice the discussion section.

I am trying to migrate the following in the "best practice" way. Can you please let met know which would be the best practice here ?
This example is for the vee-validate version 3. Please note that the email var is loaded at creation time used in the custom component but also used in other methods. I am not sure how to do this with the v4. Thank you.

<validation-observer ref="observer"">
    
    <validation-provider rules="email|required" v-slot="{ errors }">
        <my-custom-component v-model="email"></my-custom-component>
        <span>{{ errors[0] }}</span>
    </validation-provider>
    
    <a @click="validate">Do someting</a>
    
</validation-observer>

data: function() {
    return {
        email: '',
    }
},

methods: {
    validate: async function () {  
        const result = await this.$refs.observer.validate();
        if (result) {
            // do something here
        }
    },
    
    otherMethod: function() {
        // use  this.email here for other purposes
    },
    
    load: async function() {
        this.email = '....'
    }
}

[logaretm]

It will be roughly the same but replace VObserver with Form and VProvider with Field

<template>
<Form ref="form">
  <Field name="field" rules="email|required" v-model="email" v-slot="{ errors, field }">
    <my-custom-component v-bind="field"></my-custom-component>
    <span>{{ errors[0] }}</span>
  </Field>
    
  <a @click="validate">Do someting</a>
</Form>
</template>

<script>
import { Field, Form } from 'vee-validate';

export default {
  components: {
    Field,
    Form,
  },
  data: () => ({
    email: ''
  }),
  methods: {
    validate: async function () {  
      const result = await this.$refs.form.validate();
      if (result.isValid) {
        // do something here
      }
    },
    otherMethod: function() {
      // use  this.email here for other purposes
    },
    load: async function() {
      this.email = '....'
    }
  }
};
</script>

[danh65]

I'm trying to do this too and can't get it to work. I have to put v-model on the the custom component as well as the Field node to get it to work. This doesn't seem right by what the documents say, so I'm wondering what I'm doing wrong.

In the template, my form is defined like this:

When rendered, it shows this:

As you can see, there is no value in the name field.

[danh65]

I just discovered that v-bind doesn't work with Quasar input controls.
If I change:
<q-input>
to simply:
<input>
it works as expected.

Anyone know how to get it to work with Quasar's QInput?

[danh65]

Finally got the input to work by adding the 'model-value' attribute like:

But it doesn't work for q-editor so still looking for a solution for that. Anyone have an idea?

[yoni333]

works !!! thank a lot

[vedmant]

I also stuck with issue of not having Options API documentation. It would be nice to add it. Vue 3 is not only Composition API, all the Vue 2 projects build are on Options API and most of people are not rewriting this to Compositions API.

[hokkaido]

+1 It's the same with almost every vue 3.0 library project, options api documentation is non-existent yet much needed. Most vue 2.0 applications of moderate complexity will probably update to vue 3.0 while staying within the confines of the options api.

[yoni333]

this as an example of v-checkbox that work vee-validate 4 with vuetify 3
<Field name="myCHK" :rules="{ required: { allowFalse: false } }" :unchecked-value="false" v-model="myVarModel" v-slot="{ errors, field }" type="checkbox"> <v-checkbox v-bind="field" v-model="myVarModel" :label="MyLabel" color="primary" /> </Field>