Vue で入力の日付から祝日をチェックし、祝日だった場合はフラグをもたせたい。

Question

Vue で入力の日付から祝日をチェックし、祝日だった場合はフラグをもたせたいと考えております。

１．日付はdatepicker をつかってデータを入力します。
２．入力された日付が土日や祭日だった場合はholiday_flgに値をもたせたいとおもいます。
祭日はJson(holiday.json)ファイルから取得し、チェックします。

以下のような記載をしていると無限ループに陥ります。
どのような記載をしていいかわかりません。

データを入力

<div id="app_start">
   <date-picker name="checkdate" v-model="date_s" :config="options" ></date-picker>
<p>{{date_s}}</p>
</div>

<script type="text/javascript">
  // Initialize as global component
  Vue.component('date-picker', VueBootstrapDatetimePicker);
 new Vue({
    el: '#app_start',
  data: {
    date_s: '2018/12/02',
    holiday_flg:'',
holidays:'',
    options: {
      format: 'YYYY/MM/DD',
    minDate: '2018/12/02',

        }
  },

watch: {
	date_s: function  (value){
         this.holiday_flg=this.CheckHoliday(this.date_s);
	}
},
   methods : {
    CheckHoliday:function(i_date){
			var check_flg;
       var formated_date = new Date(i_date);
       var custom_date = formated_date.getDay();
       if(custom_date == 0){   //日曜の時
           check_flg=1;
        }else if(custom_date == 6){ //土曜の時
            check_flg=1;
        }else{
          //祭日Jsonのデータと比較する。
          check_flg=this.CheckNatinalHoliday(formated_date);
          alert(check_flg);
        }
				 return check_flg;
    },
		CheckNatinalHoliday : function (d){
						//holiday.jsonと入力値のdを比較して
						//祭日ならholiday_flg=1にする
          axios.get('holiday.json').then(response => (this.holidays = response.data));
							var value=moment(d).format('YYYY/MM/DD');
    					var list=this.holidays;
			      	var chc_d=0;
	            for(var i in list) {
                 var temp = list[i];
                if(temp.holiday.indexOf(value) !== -1) {
             		  chc_d=1;
                  }
          	   }
        	 return chc_d;
					},
  },

});

</script>

Comments

[NozomuIkuta]

こちら(https://teratail.com/help/question-tips#questionTips3-5-1)にあるように、コードをブロックで囲んでいただくと、読みやすくなるので、回答がつきやすくなると思います。

[Blando]

ありがとうございます。

[karamarimo]

何が無限ループになるのでしょうか。

Answer 1

他にも機能をもたせているため、詳細を記載するのが手間なので割愛します。
自己解決しました。

Answer 2

watchのdate_sでdatepickerが操作されたかを検知をしていますが、

datepickerが操作される→date_sが変更されwatchのイベントが実行される→イベント内で何故かdate_sの代入が実行される→date_sが変更されwatchのイベントが実行される…(繰り返し)

という無限ループに陥っているのかと思われます。(このソースコードのみでは断定はできませんが。。)

datepickerのchangeイベント(@dp-change)にて操作の検知をしてみてください。

<date-picker name="checkdate" v-model="date_s" :config="options" @dp-change="操作後の処理の関数"></date-picker>

Comments

[Blando]

ありがとうございます。
自己解決しました。

[退会済みユーザー]

このご回答で解決するのであれば、評価をお願いいたします。
全く違うのであれば、解決方法を回答に記述お願いいたします。

[退会済みユーザー]

またはベストアンサーとして指定お願いいたします！