未应用 Vee Validate 3.0 自定义类

Question

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

这就是我到目前为止所拥有的......

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”类应用于我的字段。

我究竟做错了什么？

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>