Vee Validate ユースケース

Q. エラー文言はどうやって表示するの？

A. v-slot を使うと便利

code:pug

ValidtionProvider(v-slot="{ errors }")

input

Q. フォームを全体的にバリデーションしたい！

A. フォームの一部または全部を ValidationObserverで ラップしましょう

code: pug

ValidationObserver

ValidationProvider

input

ValidationProvider

inpute

Q. バリデーション内容を参照したり操作したい！

A. ref 属性で適当な名前をコンポーネントにつけましょう

code: pug

ValidationObserver(ref="observer")

ValidationProvider(ref="email")

input(

v-model="email"

type="text"

)

Q. フィールド名を設定したい！

A. vidとnameがあります。表示の上ではnameが優先され、コード上はvidの値で参照できます

code:pug

ValidationObserver(ref="observer")

ValidationProvider(

rules="required"

vid="email"

name="Eメール"

)

input(

v-model="email"

id="email"

)

// -> "Eメール is required."

Q. APIから返却されたエラーを手動でセットしたいんだけど！

A. ValidationObserverにsetErrors()しましょう

code: typescript

async submit(): Promise<void> {

try {

await this.$axios.post('hoge', payload)

} catch (err) {

const res = err.response

this.$refs.observer.setErrors(res.data.errors)

}

}

Q. 画面を初期表示後、フォームを触らずサブミットした際にバリデーションしたい

A. validate() でバリデーションを明示的に走らせられます

code: typescript

async submit(): Promise<void> {

// ValidationObserver以下のフォームについてバリデーション

const validation = await this.$refs.observer.validate()

if (validation) {

await this.$axios.post('hoge', payload)

}

}