引き続きVeeValidate使っています。
VeeValidateでform要素を子コンポーネント化してみたので参考になれば。
コンポーネント化
エラークラスの付ける要素が変わったり、使い回し易さを考えコンポーネント化してみました。
<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で入れ子のフォームを作る - Qiita
## 概要
VeeValidateで、入れ子のフォームを作る方法を解説します。
せっかちな方は以下のVeeValidate公式ドキュメントを読むのが早いです。

Vue.jsでForm部品をComponent化する - Qiita
# はじめに
ゆるいAtomicDesignを意識してForm部品をComponent化してみました。
# Input
```js:input.vue
<template>
<label>
&l...
コメント