Vue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先される

今回はVue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先されるということについてご紹介いたします。

内容について文章でお伝えするのが難しいかもしれませんがサンプルコードを交えてご説明いたします。



Vue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先される

サンプルを提示した方が話が早いと思うので、まずサンプルをご紹介したいと思います。
まずうまくいかない例です。

Formの中に次のテキストボックスのインプットがあるとします。
(メソッドは私が以前書いた次の記事から引用しています。Vue.jsで@keyupを使った半角英数字や数字の入力制限)

HTML側が下記のコード

Vue.js側が下記のコードです。

一見コンソールでエラーも出ず、うまくいくように見えますが実はうまくいきません。

正しくはFormの中の要素に対するVueインスタンスの作成「new Vue{}」を消し、代わりにFormのmethods側に関数を定義する必要があります。

下記はうまくいく例です。
修正すると、
HTML側が下記のコード(以前のHTMLと変わりません。)

Vue.js側が下記のコードになります。

これを実行するとうまくいきます。

終わりに

今回はVue.jsでFormの中の要素に対するメソッドよりも、Formに対するメソッドの方が優先されるということについてご紹介いたしました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

直接契約ができるフリーランスエージェント「エンハンス」を立ち上げました。
詳しくは下記LPをご参照ください。
https://enhance.decryption.co.jp/

Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






Vue.js

Posted by ちこ