【Vue】ページ初回表示時にフォームのバリデーションエラーを発火させない
目次
何かしてからエラーを表示させたい
ページに設置したお問い合わせフォームの入力内容をチェックするバリデーションをVue.jsで作ってみたのですが、入力していないのにエラーを表示する仕様になってしまいました。ページを表示していきなり赤文字のエラーが表示されていると、正直気分が悪いです。
初回表示時は発火させない方法
バリデーションはcomputed（算出プロパティ）で実行するようにしています。methodsにカウンターを作り、フォームのinputタグにv-on.click="countUp"またはv-on.change="countUp"を加えて、フォームに入力があるとカウンターが0以上になり、computedの命令が実行されるうにIF文を入れることで解決できました。
例
HTML部分
@changeはv-on.changeと同じ意味です。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><div id="app"> <input type="text" v-model="message" @change="countUp"/> <div>カウント:{{count}}</div> <div>エラー:{{nameCheck}}</div> </div> |
JS部分
var app = new Vue({ el: "#app", data:{ count: 0, }, methods: { countUp: function() { this.count += 1 }, }, computed: { nameCheck() { if(this.count > 0) { if(!this.message){ return "入力がありません"; } } } },}) |
デモ
入力欄の値を変更してフォーカスを外すとカウントの数が増えます。入力欄に何か文字があるとエラーが表示されませんが、入力欄を空にするとエラーが表示されます。
カウント:0
エラー:
