问题描述
<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