bootstrap vue select, how to catch input focusout event

Question

I have a select:

  <b-form-select
     @input="genderErrors()"
     v-model="user.gender.value"
     :options="user.gender.items"
     class="mdb-select md-form gender-class"
  ></b-form-select>
 <b-form-invalid-feedback
    v-show="user.gender.errors.length > 0"
 >{{user.gender.errors.join(' ')}}</b-form-invalid-feedback>

and validation for it:

import {validationMixin} from 'vuelidate'
import {required} from 'vuelidate/lib/validators'
export default {
  mixins: [validationMixin],
  name: 'App',
  validations: {
    user: {
      gender: {
        value: {
          required,
        }
      }
   },
   data: () => ({
      gender: {
        items : [
          {value:'male', text: 'Male'},
          {value: 'female', text: 'Female'},
          {value: null, text: 'Gender'}
          ],
        value: null,
        errors: []
      },
   }),
   methods{
     genderErrors(person) {
          console.log('hahah')
          this.$v.[person].gender.value.$touch();
          this.[person].gender.errors = [];
    
          if (!this.$v.[person].gender.value.$dirty) {
            return;
          }
    
          if (!this.$v.[person].gender.value.required) {
            this.[person].gender.errors.push('Gender required')

          }
  
        },
    }
}

in this example, it's a trigger genderErrors only when I select some option, but I want to trigger it also when related input is out of focus, to determine if the user clicks on input but does not select any value. Depends on the documentation it does not support that event, but maybe there are some way of doing it???

Thanks in advance!

ThPadelis ThPadelis · Accepted Answer · 2020-09-15T08:44:36

2

votes

You can use @blur.native="onBlur($event)". Take a look here

bootstrap vue select, how to catch input focusout event

1 Answers