バリフォー
Warning: Attempt to read property "site_name" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 208
Warning: Attempt to read property "title" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 211
Warning: Attempt to read property "description" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 217
Warning: Attempt to read property "site_name" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 208
Warning: Attempt to read property "title" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 211
Warning: Attempt to read property "description" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 217
Nuxt3でvuetify3とVeeValidate4を実装するのに手こずる
Nuxt3で、vuetify3を使ってフォームを作成し、VeeValidate4でバリデーションしたけど、なかなかうまくいかず、調べたのでメモ。単純にお問い合わせフォームを設置しようと、作り始めましたが、ちゃんと動きません。試行錯誤した結果、ようやくなんとかなりました。※確認画面やサンクス画面はvueifyで用意されていなさそうなので、自分で作ってる最中。まだ完成しておらず、ここには掲載していません。ボタンを押したら、横にスクロールして、フォームの記入画面と確認画面とサンクス画面が入れ替わる予定です。
Version
Nuxt: 3.9.1
vuetify: 3.4.10
vee-validate: 4.12.4
yup: 1.3.3お問い合わせフォームを作る
名前、メールアドレス、問い合わせ内容、居住地と送信ボタンだけのとても簡易なフォームです。vuetify3とVeeValidateの組み合わせは下記を参考にしました。なんで、.value.valueになっているだと修正したりながら書いていましたが、結果的に下記そのままの方がちゃんと動くことを確認。
VeeValidateの実装は下記を参考にしています。
あと、詰まったところがあって、その時はこちらを参考にしました。schema.fieldsはchatGPTが教えてくれたので、使っています。
メールアドレスを入力していると文字を入力する度にバリデーションエラーが表示されるので、送信ボタンを押すとバリデーションする形に変更。メールアドレスのみvalidateOnValueUpdate: falseの設定を加えることで希望どおりの動きに。vee-validate3のInteraction Modesに若干踊らされたのでした。
できたのはこちら。submitはバリデーションとデータ登録と横に移動するためにあり、横に移動するのは未実装。移動先に、データを送信するボタンを設置する予定です。resetFormも送信後に、フォームがリセットされます。
import { useField, useForm } from 'vee-validate';
import { object, string } from 'yup';
import type { InquiryArray } from '~/types/jsonarray';
const fd = new FormData();
const schema = object({
mainText: string().required('必須項目です。'),
name: string().required('必須項目です。'),
mail: string().required('必須項目です。').email('メールアドレスの形式ではありません。')
});
const { handleSubmit, resetForm } = useForm({
validationScheme: schema
});
const mainText = useField('mainText', schema.fields.mainText);
const name = useField('name', schema.fields.name);
const mail = useField('mail', schema.fields.mail, {
validateOnValueUpdate: false
});
const place = useField('place');
const submit = handleSubmit((values: InquiryArray) => {
for (const key in values) {
if (values[key] !== undefined) {
fd.set(key, values[key] as string);
}
}
// for (const value of fd.entries()) {
// console.log(value);
// }
});