Vee-validate3を使って、子コンポーネントのエラーを親コンポーネントで表示する

概要

vee-validate3系で親子コンポーネントのvalidationを試してみたらすごい簡単だったのでざっと紹介
サンプルコードはtypescriptになってます

使ったもの

• Nuxt 2.8.1
• vee-validate 3.0.3

サンプルコード

設定ファイル

plugins/veeValidate.ts

import Vue from 'vue';
import { ValidationObserver, ValidationProvider, localize, extend } from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja.json';
import { required, max } from 'vee-validate/dist/rules';

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

extend('required', { ...required });
extend('max', { ...max });

localize('ja', ja);

親コンポーネント

<validation-observer> を使ってcomponentを囲むだけ
v-slot に子コンポーネントのメッセージや、validかどうかなどを取得できます

pages/test.vue

<template>
  <div class="newPost">
    <validation-observer v-slot="{ invalid, errors }">
      <template v-if="invalid">
        <div v-for="(error, i) in errors['test']" :key="`error${i}`">
          <p>{{ error }}</p>
        </div>
      </template>
      <test-form />
    </validation-observer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { ValidationObserver } from 'vee-validate';

import TestForm from '~/components/TestForm.vue';

@Component({
  components: {
    TestForm
  }
})
export default class Test extends Vue {}
</script>

子コンポーネント

<validation-provider>で囲む

components/TestForm.vue

<template>
  <div class="test-form">
    <validation-provider vid="test" name="メッセージ" rules="required|max:10">
      <textarea v-model="message" />
    </validation-provider>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { ValidationProvider } from 'vee-validate';

@Component
export default class TestForm extends Vue {
  message: string = '';
}
</script>

vidを指定することで親コンポーネントでkeyとしてerrorsを判定できる

errors: {
  test: ['error message1', 'error message2']
}

これだけで完了です！