Vee-validate - [Vue warn] :지시문을 확인하지 못했습니다. 검증

Vee-validate - [Vue warn] :지시문을 확인하지 못했습니다. 검증

텍스트 필드의 유효성을 확인하고 싶다.다음 코드를 사용해 보겠습니다.

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

단, 다음 오류가 발생합니다.

app.js:48089 [Vue warn] :지시문을 확인하지 못했습니다. 검증

시도 중:

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

이행 가이드에 따르면 이 디렉티브는 v3.x에서 삭제되어 있습니다.

를 가진 필드v-validate지시문은 에 의해 포장될 필요가 있다ValidationProviderv-model을 사용하여 ve-model에 적절한 태그를 붙여야 합니다.그래서 다음과 같이 됩니다.

<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);

번들러를 사용하지 않고 브라우저 또는 CDN에서 vee-validate를 사용하는 경우:

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

언급URL : https://stackoverflow.com/questions/63415650/vee-validate-vue-warn-failed-to-resolve-directive-validate