質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

解決済

vee-validate4 useForm関数が動作しない。 Vue3

tkm0604
tkm0604

総合スコア272

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

1回答

0評価

0クリップ

235閲覧

投稿2022/01/28 07:00

編集2022/01/28 17:01

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"

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。