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に対するメソッドの方が優先されるということについてご紹介いたしました。

【お知らせ】
プログラミングのコンサルタントをすることを考えております。
下記の通り、かなり格安でご用意させていただいております。
【格安】プログラミングコンサル生募集(初心者向け、フリーランス志望向け)

詳しくは下記のリンクをご覧ください。
https://chico-shikaku.com/2020/10/programming-consult-2020/

11月くらいを目処に開始予定です。
最初は募集があれば先着5名くらいを目安に考えております。
質問や意見、問い合わせやお申し込みは下記のリンクよりお願いいたします。
https://docs.google.com/forms/d/e/1FAIpQLSeTXskmlyPAHuhwiOE9togqJPWdhXYCyRoVnFkkbS0VN0Ftug/viewform?usp=sf_link

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






Vue.js

Posted by ちこ