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>

您还可以在<b-form-input> 和周围的<b-form-group> 上使用Bootstrap-Vue 的state 和invalid-feedback 属性以更好地显示验证错误。这一切都在codepen

中得到了展示