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

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

请您参考如下方法:

您已将错误消息放入 <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-Vue 的 state和 invalid-feedback <b-form-input> 上的属性和周围<b-form-group>以更好的可访问性显示验证错误。 codepen 中展示了所有这些