【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}}
