0

Делаю валидацию полей в Vue. Подключен bootstrap-vue, который имеет встроенную кривую валидацию, которая работает не так как нужно, то есть высвечивает состояние полей сразу до введения данных.

Цель - показывать валидацию поля только после потери фокуса на нём. На инпут вешается директива вида :state="stateValidMessageUserName", в Computed создается такое же свойство, которое при возврате true делает поле зелёным, false красным.

То есть как правило в компутед засовывается значение инпута, которое через какие-то проверки валидации возвращает тру или фоллс. Но делает это сразу.

 <b-form-input @blur="blurValidMessageUserName" :state="stateValidMessageUserName" autocomplete="off" type="text" id="messageUserName" placeholder="Имя" name="messageUserName" v-model="messageUserName"></b-form-input>

 computed: {
            stateValidMessageUserName() {
                this.$state.getters.messageUserNameValid;
            },

getters: {
        messageUserNameValid(state) {
            return state.messageUserName < 30
        }

Как видно, в поле на событие потери фокуса я повесил обработчик @blur, который при потери фокуса что-то делает. Как мне увязать всё это, чтобы валидация отрабатывала только после потери фокуса и сохранялась при этом?

1 ответ 1

0
Попробуйте в :state привязать не к вычисляемому свойству. А например к свойству в объекте data

data(){
  return {
    isValid: null
  }
}

methods: {
  здесь присваивать результат проверки в isValid и тогда валидация будет проведена после вызова метода
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.