【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 "入力がありません"; } } } }, })
デモ
入力欄の値を変更してフォーカスを外すとカウントの数が増えます。入力欄に何か文字があるとエラーが表示されませんが、入力欄を空にするとエラーが表示されます。
カウント:{{count}}
エラー:{{nameCheck}}