vee-validate не работает с bootstrap-vue

Question

Я пытаюсь использовать vee-validate для проверки формы с помощью bootstrap-vue и не могу заставить что-либо работать.В основном, я хочу сделать:

<b-form-input v-model="emailText"
              placeholder="Enter email"
              v-validate="'required|email'"
              name="email"
              type="text">
    <b-row>
        <span>{{ errors.first('email') }}</span>
    </b-row>
</b-form-input>

Но я ничего не вижу, когда я набираю не-электронный адрес в поле.Однако, если я изменю:

b-form-input на input

, тогда все работает.Есть ли способ обойти это поведение?Любая помощь будет принята с благодарностью.

Answer 1

Вы поместили сообщения об ошибках в <b-form-input>, который не имеет внутреннего слота, поэтому сообщения об ошибках не отображаются.Если вы перемещаете их после ввода, это должно исправить вашу проблему:

<b-form-input v-model="emailText"
              placeholder="Enter email"
              v-validate="'required|email'"
              name="email"
              type="text">
</b-form-input>
<b-row>
    <span>{{ errors.first('email') }}</span>
</b-row>

Вы также можете использовать свойства state и invalid-feedback Bootstrap-Vue для <b-form-input> и окружающего <b-form-group>для отображения ошибок проверки с лучшей доступностью.Все это продемонстрировано в этом коде