Vue.jsでVue componentを使ったバリデーションエラーメッセージサンプル

今回はVue.jsでVue componentを使ったバリデーションエラーメッセージのサンプルコードを貼っていきたいと思います。



Vue.jsでVue componentを使ったバリデーションエラーメッセージサンプル

こちらのVue.jsの公式ドキュメントのバリデーションを参考にサンプルを乗っけます。
https://jp.vuejs.org/v2/cookbook/form-validation.html

Vue.jsの公式ドキュメントでは

としてエラーメッセージを表示していますが、このソースコードをそのまま流用していくと、複数の場所にこのコードを貼った時に少しくどいように感じられるかもしれません。

そこで役に立つのがVueのcomponentを使った書き方です。
まず、js側でこのように書きます。

一方、HTML側では下記のように書きます。
‘エラーが入っている配列’には配列になっている変数を入れます。

こうすることによって、エラーメッセージを出す部分が共通化されて、ソースコードがかなり簡略化されると思います。

ぜひお試しください。

ちなみにVue componentでtrやli,ulを使うと外に描画されてしまう現象が起きることがあります。
その対処法は下記の記事にまとめましたのでご参考になればと思います。
Vue.jsでcomponentを使った時にtrやli,ulが外に出てしまう問題の対処法

終わりに

今回はVue.jsでVue componentを使ったバリデーションエラーメッセージのサンプルコードをご紹介いたしました。

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

詳しくは下記のリンクをご覧ください。
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 ちこ