Vue-select: vee-validate

[pimboden]

First: This is a nice control.
The only problem I have so far is that I don't know how to make vee-validate work on it... I just need a "require" and an "in" validation.
Could you post an example of how this can be achieved?

Thank you!

[ragne]

@pimboden
I ended just hooking on onChange and embed validator into vue component like this:

<script>
import vSelect from 'vue-select';
import { Validator } from 'vee-validate';

export default  {
    name: 'my-component',
    created() {
        this.validator = new Validator({
            'email': 'required|email',
        });
        this.$set(this, 'errors', this.validator.errorBag);
    },
   data() {
      return {
         errors: null,
         emailOptions: {"display_name": "Lorem Ipsum", "email": "[email protected]"}
     }
   },
   methods: {
       onChange: function (value) {
        this.validator.validate('email', value); //sometimes this can return Promise
        // see docs at http://vee-validate.logaretm.com/api.html#validator
      },
   }
}
</script>

<template>
<div class="form-group" :class="{'has-danger': errors.has('email')}">
        <label for="email" class="form-control-label">Email</label>
        <v-select id="email" label="display_name" :onChange="onChange"
        :options="emailOptions" placeholder="Select email"></v-select>
        <div  v-show="errors.has('email')" class="form-control-feedback">{{ errors.first('email') }}</div>
    </div>
</template>

Sorry, but right now I had no time to post this example on jsfiddle. But I suggest looking at:

• http://vee-validate.logaretm.com/api.html#validator-example
• http://vee-validate.logaretm.com/api.html#validator

Hope it helps!

[mijailn]

You can use component validation in the onChange method

http://vee-validate.logaretm.com/examples.html#component-example

regards

[ragne]

You're right, overlooked this part )

[pimboden]

@mijailn I don't understand it... component validation in the onchange... I actually don't understand the component validation concept... So I think I'm too stupid for it.. ;).

@ragne Thanks for your sample... that I understand!

[mijailn]

You just have to put these properties

<v-select data-vv-name="email" v-model="email" v-validate="email" :options="['[email protected]','[email protected]']" placeholder="Select email"></v-select>

[pymarco]

According to vee-validate documentation for custom components:

Should have a data-vv-value-path attribute which denotes how to access the value from within that component (Needed for validateAll calls).

What value would I use for that? I tried value and mutableValue and neither will validate for required. My options are defined as an array of (label/value) objects.

[pkimtani]

Hi,

I have a app which has 3 pages under same route, say page1, page2 and page3

On page1 I am capturing year (dropdown using vue-select)
On page2 I am capturing month (dropdown) using vue-select)
on page3 I am capturing day (dropdown using vue-select).

All three fields are binded with vee-validate: rule => required

The page is switched with a next button and is track in data: pageNumber

Vee-validate validates the year dropdown on first time but on going to next page, page2, vee-validate stops working.

Can someone please help?