【Vue】ページ初回表示時にフォームのバリデーションエラーを発火させない

何かしてからエラーを表示させたい

ページに設置したお問い合わせフォームの入力内容をチェックするバリデーションをVue.jsで作ってみたのですが、入力していないのにエラーを表示する仕様になってしまいました。ページを表示していきなり赤文字のエラーが表示されていると、正直気分が悪いです。

初回表示時は発火させない方法

バリデーションはcomputed(算出プロパティ)で実行するようにしています。methodsにカウンターを作り、フォームのinputタグにv-on.click="countUp"またはv-on.change="countUp"を加えて、フォームに入力があるとカウンターが0以上になり、computedの命令が実行されるうにIF文を入れることで解決できました。

HTML部分

@changev-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}}

参考にさせていただいたページ

Link

【vue.js】methods,computed,watchの発火タイミングを監視で確認 | いしだろぐ

https://ishidalog.com/?p=343

PAGETOP