Добрый день, есть форма с двумя инпутами, один валидируется по умолчанию на пустое значение, а второй только если включен чекбокс(тогда появляется инпут).
C первым инпутом все работает, но со вторым постоянно ошибка, я очень буду благодарен за помощь.
<form action="" @submit.prevent="editInfo($event)">
<p class="sub-text">Информация о ректоре</p>
<div class="rector-info">
<div class="input-group" :class="{ 'form-group--error': $v.forms.rector.$error, 'form-group--success': !$v.forms.rector.$invalid }">
<label for="fio-rector">Ректор</label>
<div class="input-container">
<input id="fio-rector" name="manager_fullname_ua" type="text" placeholder="ПІБ" v-model="$v.forms.rector.$model">
<div class="error" v-if="!$v.forms.rector.required && $v.forms.rector.$dirty">Поле не может быть пустым</div>
</div>
</div>
</div>
<p class="sub-text">Дополнительные функции</p>
<div class="additional-functions">
<div class="input-group">
<input id="additional-checkbox" name="schedule" type="checkbox" v-model="visible">
<label for="additional-checkbox" class="custom-checkbox">
<span>Дополнительная функция 0</span>
</label>
</div>
<div class="input-group">
<input v-if="visible" name="shedule_start_date" type="text" placeholder="Дополнительная функция 0" v-model="$v.forms.additional.$model">
<div class="error" v-if="!$v.forms.additional.required && $v.forms.additional.$dirty">Поле не может быть пустым</div>
</div>
</div>
<div class="btn-container">
<button type="submit" class="btn-primary edit" @click="editInfo($event)" :disabled="submitStatus === 'PENDING'">Добавить</button>
</div>
</form>
new Vue({
el: '#App',
data: {
visible: false,
forms: {
rector: '',
additional: ''
}
},
validations() {
return {
forms: {
rector: {required},
// как записать условие что если visible === true добавлять валидацию к полю additional?
additional: {required}
}
}
},
methods: {
editInfo: function (e) {
let target = e.target || e;
this.$v.$touch()
if (this.$v.$invalid) {
console.log('Error');
this.submitStatus = 'ERROR'
} else {
console.log("Done")
}
},
}
})
