vee-validate4を用いてバリデーション処理を実装しています。
useForm関数を利用してバリデーションのスキーマを作成し、バリデーションの処理をまとめたいのですが、下記コードの中の
<input v-model="text">
<input v-model="title">のバリデーションが動作しません。
javascript
<form> <div> <!-- 画像エリア --> <div id="image_area"> <canvas ref="preview" id="preview"></canvas> <input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage"/> </div> <p> <input v-model="text" type="text" id="canvas_text" > <p>{{ errors.text }}</p> <button type="button" @click="drawText('preview', 'canvas_text')"> 文字を描く </button> </p> <!-- タイトル入力 --> <div> <input v-model="title" type="text" name="title" placeholder="タイトル"> <p>{{ errors.title }}</p> </div> <button @click="saveCanvas('preview')">アップロード</button> </div> </form> <script> import { useField, useForm } from "vee-validate"; import * as yup from 'yup'; export default { setup() { const schema = object({ text: string().required(), title: string().required() }); const{ errors } = useForm({ ValidationSchema: schema }); const { value: text } = useField('text'); const { value: title } = useField('title'); return { text, title, errors, } }, }; </script>
下記URLのサイトを参考にコードを書いています。
https://reffect.co.jp/vue/veevaliate4#useForm
参考サイトの「3.6 useFormの利用」からバリテーションが働かないです。
サイト通りに書いているはずなのですが、、、、
「useForm関数から戻されるオブジェクトに含まれるerrorsからもメッセージを取得することができます。」との事なのですが、errorsからもメッセージを取得できません。
どうすればuseForm関数からerrorメッセージを取得できるでしょうか?
開発環境
"vue": "^3.2.20",
"vee-validate": "^4.5.8",
"yup": "^0.32.11"
まだ回答がついていません
会員登録して回答してみよう