Vee-validate 3和Bootstrap 3表单错误样式

Question

如何将has-error样式添加到Bootstrap3输入的包装div中？

所以这不会生效，因为ValidationProvider组件找不到输入：

<!-- doesn't work because the provider can't find the input -->
<ValidationProvider v-slot="{ errors }">
    <div :class="{'form-group': true, 'has-error': errors.lenght > 0}">
        <label for="credit-card">
            Card Number
        </label>
        <input type="text" id="credit-card" class="form-control" data-stripe="number" v-model="paymentForm.creditCard.number"/>
    </div>
</ValidationProvider>

所以这是有效的，但是我不能访问包装div并检查那里的{{errors[0}}。

<!-- this won't work, obviously -->
<div :class="{'form-group': true, 'has-error': errors.lenght > 0}">
    <ValidationProvider v-slot="{ errors }">
        <label for="credit-card">
            Card Number
        </label>
        <input type="text" id="credit-card" class="form-control" data-stripe="number" v-model="paymentForm.creditCard.number"/>
    </ValidationProvider>
</div>

如何使用vee-validate将has-error类放到包装目录中，而不需要重新发明轮子并围绕它做大量自定义代码来使其正常工作？

Answer 1

您有一个拼写错误，“length”而不是"length"，并且“> 0”不是必填的。第一个例子应该没问题。

<ValidationProvider v-slot="{ errors }">
    <div class="form-group" :class="{'has-error': errors.length}">
        <label for="credit-card">
            Card Number
        </label>
        <input type="text" id="credit-card" class="form-control" data-stripe="number" v-model="paymentForm.creditCard.number"/>
    </div>
</ValidationProvider>