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の公式ドキュメントでは
|
1 2 3 4 5 6 |
<p v-if="errors.length"> <b>Please correct the following error(s):</b> <ul> <li v-for="error in errors">{{ error }}</li> </ul> </p> |
としてエラーメッセージを表示していますが、このソースコードをそのまま流用していくと、複数の場所にこのコードを貼った時に少しくどいように感じられるかもしれません。
そこで役に立つのがVueのcomponentを使った書き方です。
まず、js側でこのように書きます。
|
1 2 3 4 5 |
Vue.component('error-list', { props: ['errors'], template: '<p v-if="errors.length"><b>Please correct the following error(s):</b><ul><li v-for="error in errors">{{ error }}</li></ul></p>' }) |
一方、HTML側では下記のように書きます。
'エラーが入っている配列’には配列になっている変数を入れます。
|
1 |
<error-list :errors='エラーが入っている配列'/> |
こうすることによって、エラーメッセージを出す部分が共通化されて、ソースコードがかなり簡略化されると思います。
ぜひお試しください。
ちなみにVue componentでtrやli,ulを使うと外に描画されてしまう現象が起きることがあります。
その対処法は下記の記事にまとめましたのでご参考になればと思います。
Vue.jsでcomponentを使った時にtrやli,ulが外に出てしまう問題の対処法
終わりに
今回はVue.jsでVue componentを使ったバリデーションエラーメッセージのサンプルコードをご紹介いたしました。