【发布时间】:2021-01-01 23:18:01
【问题描述】:
我有一个选择:
<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 它不支持该事件,但也许有一些方法可以做到这一点???
提前致谢!
【问题讨论】:
标签: vue.js bootstrap-vue