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を使ったバリデーションエラーメッセージのサンプルコードをご紹介いたしました。

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






Vue.js

Posted by ちこ