时间戳

首页 > 解决方案 > vee-validate 不能与 bootstrap-vue 一起使用

vuejs2 - vee-validate 不能与 bootstrap-vue 一起使用

问题描述

我正在尝试使用 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

然后一切正常。这种行为有解决方法吗？任何帮助将不胜感激。

标签： vuejs2bootstrap-vuevee-validate

解决方案

您已将错误消息放在<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>

您还可以使用 Bootstrap-Vuestate和周围的invalid-feedback属性来显示验证错误，并具有更好的可访问性。所有这些都在这个codepen中得到了展示<b-form-input><b-form-group>

推荐阅读