Vue で入力の日付から祝日をチェックし、祝日だった場合はフラグをもたせたいと考えております。
1.日付はdatepicker をつかってデータを入力します。
2.入力された日付が土日や祭日だった場合は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>
回答2件
あなたの回答
tips
プレビュー