【Vue.js】VeeValidateでform要素をコンポーネント化したが、いまいちだった件

引き続きVeeValidate使っています。

VeeValidateでform要素を子コンポーネント化してみたので参考になれば。

コンポーネント化

エラークラスの付ける要素が変わったり、使い回し易さを考えコンポーネント化してみました。

TextField.vue（子）

<template>
    <div v-bind:class="[{ is_error: validateState}, wrapClass]">
        <input :id="id" :type="type"
               :name="name"
               :placeholder="placeholder"
               class="form-control"
               v-validate="validate"
               :data-vv-as="label"
               :value="value"
               @input="updateValue"
        >
        <p v-if="validateState" class="form-message">{{ errors.first(name) }}</p>
    </div>
</template>

<script>
    export default {
        inject: ['$validator'],
        props: {
            wrapClass: String,
            id: String,
            name: String,
            type: String,
            validate: String,
            placeholder: String,
            label: String,
            value: {},
        },
        computed: {
            validateState() {
                return this.errors.has(this.id)&&this.validate ? true : false;
            }
        },
        methods: {
            updateValue(e) {
                this.$emit('input', e.target.value)
                this.$emit('change', e.target.value)
            }
        }
    }
</script>

親から呼び出し

<div class="row">
    <text-field wrapClass="col-md-6" id="first_name" name="first_name"
                label="姓" placeholder="姓"
                validate="required" v-model="user.user.first_name"></text-field>
</div>

出力される要素

<div data-v-3e2ac97c="" class="is_error col-md-6"><input id="first_name" name="first_name" placeholder="姓" data-vv-as="姓" class="form-control" aria-required="true" aria-invalid="true"> <p class="form-message">姓は必須項目です</p></div>

まとめ

親から各子コンポーネントのエラー状態を取得できないので、ストアパターンなどで頑張ってみたが私には無理でした。
結局inject: [‘$validator’]を使い上記のような形になりました。

inject: [‘$validator’]は推奨されておらず、親、子ともに冗長な気がするので普通に親コンポーネントでVeeValidateを当てていく形がいいのかなと思いました。

参考記事
[Vue.js] VeeValidateで入れ子のフォームを作る
Vue.jsでForm部品をComponent化する