引导vue选择,如何捕获输入焦点事件

问题描述

我有一个选择:

  <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>

并对其进行验证:

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')

          }
  
        },}
}

在此示例中,仅当我选择某个选项时,它才是触发器genderErrors,但是当相关输入未聚焦时,我也要触发它,以确定用户是否单击了输入但未选择任何选项值。取决于documentation,它不支持该事件,但是也许有某些方法可以实现??

谢谢!

解决方法

您可以使用@blur.native="onBlur($event)"。看看here