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>属性，以显示具有更好可访问性的验证错误。 codepen

展示了所有这些内容

vee-validate无法与bootstrap-vue一起使用

1 个答案: