vue.js - Vee 验证 - [Vue 警告] : Failed to resolve directive: validate

Question

我想验证文本字段，尝试下面的代码:

 <input v-validate="result.val=='Required' ? 'required' : ''" v-model="required" :name="f_name" type="text"/>

但收到此错误:

app.js:48089 [Vue warn]: Failed to resolve directive: validate

试试这个:

<ValidationProvider name="phone" :rules="required" v-slot="{ errors }">
  <input class="form-control" :name="phone" type="text" v-model="form.phone"/>
  </ValidationProvider>

Answer 1

根据migration guide这个指令在 v3.x 中被移除:

Fields that had the v-validate directive needs to be wrapped by ValidationProvider component now, and they need to use v-model to properly tag themselves for vee-validate.So this:

<input type="text" name="field" v-validate="'required'">
<span>{{ errors.first('field') }}</span>

将重写为:

<ValidationProvider name="field" rules="required" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

你的代码应该是这样的:

<ValidationProvider name="f_name" :rules="result.val=='Required' ? 'required' : ''" v-slot="{ errors }">
<input v-model="required" :name="f_name" type="text"/>
</ValidationProvider>

你应该把它添加到 main.js :

import { ValidationProvider } from 'vee-validate';

Vue.component('ValidationProvider', ValidationProvider);

如果您没有使用 bundler 并在浏览器或 CDN 中使用 vee-validate:

<script>
  // ...
  Vue.component('validation-provider', VeeValidate.ValidationProvider);
  // ...
</script>