Vee Validate 3.0 自定义类未应用

Question

根据文档，我认为我需要使用配置将自定义 class 添加到我的验证字段，但我无法让它工作。

这是我目前所拥有的...

import { extend, configure, localize } from 'vee-validate'
import { required, min, max } from 'vee-validate/dist/rules'
import en from 'vee-validate/dist/locale/en.json'

// Install rules
extend('required', required)
extend('min', min)
extend('max', max)

// Install classes
configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid'
  }
})

// Install messages
localize({
  en
})

而且在我看来....

<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="checkRef()">
  <div class="form-group">
    <label for="reference">Reference</label>
    <ValidationProvider rules="required|max:20" name="reference" v-slot="{ errors }">
      <input maxlength="20" name="reference" v-model="ref" id="reference" class="form-control"/>
      <span class="warning">{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
  <button @click="checkRef" class="btn btn-primary app-button">Check Reference</button>
</ValidationObserver>

当我单击按钮时，我看到了错误消息，但我没有将 'in-invalid' class 应用于我的字段。

我做错了什么？

Answer 1

VeeValidate 不再自动应用类，因为 v3 您现在必须自己绑定它。与 errors 一样，您可以从插槽道具中提取 classes 并将其应用于您的输入：

<ValidationProvider rules="required|max:20" name="reference" v-slot="{ errors, classes }">
  <input maxlength="20" name="reference" v-model="ref" id="reference" class="form-control" :class="classes" />
  <span class="warning">{{ errors[0] }}</span>
</ValidationProvider>

Vee Validate 3.0 自定义类未应用

Vee Validate 3.0 custom classes not applied

vue.js

vee-validate

Vee Validate 3.0 自定义 类 未应用

Vee Validate 3.0 custom classes not applied

vue.js

vee-validate

Vee Validate 3.0 自定义类未应用