Vue.js 引导vue选择,如何捕获输入焦点输出事件
我有一个选择:Vue.js 引导vue选择,如何捕获输入焦点输出事件,vue.js,bootstrap-vue,Vue.js,Bootstrap 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-
<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>
在本例中,仅当我选择某个选项时,它才是一个触发器genderErrors
,但当相关输入失去焦点时,我也想触发它,以确定用户是否单击输入但未选择任何值。视情况而定,it不支持该活动,但可能有某种方式可以做到这一点
提前谢谢 您可以使用
@blur.native=“onBlur($event)”
。看一看您可以使用@blur.native=“onBlur($event)”
。看一看
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')
}
},
}
}