Vue-select: Vee-Validate validation issue

[palakdhingra]

Hi, is there any way to apply validation on v-select, need this very urgently.

[sagalbot]

Yes. The docs for Vee-Validate show you can validate v-model. You must have a name attribute that matches the v-model, which in the example below is email. Then, bind that name to the validator with v-validate:email.

https://codepen.io/sagalbot/pen/qxbPLY?editors=1010

<v-select :options="options" v-model="email" v-validate:email="'required|email'" name="email"></v-select>

 <span v-show="errors.has('email')" class="danger">
    {{ errors.first('email') }}
</span>

Vue.component('v-select', VueSelect.VueSelect)
Vue.use(VeeValidate)

new Vue({
  el: '#app',
  data: {
    options: [
      '[email protected]',
      'invalid email address',
    ],
    email: null
  }
})

I will get this added to the docs.

[palakdhingra]

@sagalbot thanks for the help, but I need to set the border color of input red.

[sagalbot]

Updated the example.

https://codepen.io/sagalbot/pen/qxbPLY

[fahmiegerton]

Updated the example.

https://codepen.io/sagalbot/pen/qxbPLY

It doesn't work