类型错误:无法读取未定义的属性“已检查”

时间:2021-04-13 19:28:16

标签: typescript vue.js

当我在下面的代码中输入 Monday From 和 Monday To 的时间时,我在控制台中收到此错误 我有一个开关,我想复制我为星期一 From/To 输入的时间一周中的。为什么我会收到这个错误,我该怎么做才能修复它。

这是拨动开关按钮的代码

 <b-form-checkbox switch v-model="providerScheduleDays.isCopytoMF" 
  @change="toggleCopyMF($event.target.checked)"> Copy times to Mon-Fri</b-form-checkbox>

周一到/从和周二到/从的输入

                            <b-col lg="6">
                                    <!-- <strong>Monday</strong> -->
                               <common-forminputs-btextinputwithvalidation                                          
                               :rules="`compare_to_end_time:${providerScheduleDays.mondayCloseHour}`"
                                        label="Monday From"
                                        requiredDisplayName="From"
                                        v-model="providerScheduleDays.mondayOpenHour"
                                        id="providerMondayOpen"
                                        name="providerMondayOpen"
                                        labelClass="w-50 pl-2"
                                        inputClass="mb-2"
                                        type="time"/>
                                      </b-col> 
                                 
                                  <b-col lg="6">
                                   <common-forminputs-btextinputwithvalidation                                            
                             :rules="`compare_to_start_time:${providerScheduleDays.mondayOpenHour}`"
                                        label="Monday To"
                                        requiredDisplayName="To"
                                        v-model="providerScheduleDays.mondayCloseHour"
                                        id="providerMondayClose"
                                        name="providerMondayClose"
                                        labelClass="w-50 pl-2"
                                        inputClass="mb-2"
                                        type="time"/>
                                  </b-col>
                                </b-row>  
                              
                                <b-row class="pb-0">
                                  <b-col lg="6">
                                    <!-- <strong>Tuesday</strong> -->
                                    <common-forminputs-btextinputwithvalidation                                          
                             :rules="`compare_to_end_time:${providerScheduleDays.tuesdayCloseHour}`"
                                      label="Tuesday From"
                                      requiredDisplayName="From"
                                      v-model="providerScheduleDays.tuesdayOpenHour"
                                      id="providerTuesdayOpen"
                                      name="providerTuesdayOpen"
                                      labelClass="w-50 pl-2"
                                      inputClass="mb-2"
                                      type="time"                                                                                    
                                      @keyup="copyValuesMF($event.target.value)"
                                    />
                                  </b-col>
                                  
                                  <b-col lg="6">
                                    <!-- <strong>Tuesday</strong> -->
                                    <common-forminputs-btextinputwithvalidation                                          
                           :rules="`compare_to_start_time:${providerScheduleDays.tuesdayOpenHour}`"
                                      label="Tuesday To"
                                      requiredDisplayName="To"
                                      v-model="providerScheduleDays.tuesdayCloseHour"
                                      id="providerTuesdayClose"
                                      name="providerTuesdayClose"
                                      labelClass="w-50 pl-2"
                                      inputClass="mb-2"
                                      type="time"                                                                                    
                                      @keyup="copyValuesMF($event.target.value)"
                                    />
                                  </b-col>

打字稿文件中的函数

copyDate = false;
toggleCopyMF(isActive: boolean) {this.copyDate = isActive 
if(this.copyDate) {this.copyValuesMF(this.providerScheduleDays.mondayOpenHour); 
  this.copyValuesMF(this.providerScheduleDays.mondayCloseHour);
 } 
}   
copyValuesMF(value: string | undefined) {if(this.copyDate) {this.providerScheduleDays.tuesdayOpenHour 
 = value;
this.providerScheduleDays.tuesdayCloseHour = value }     
}

1 个答案:

答案 0 :(得分:1)

不建议在 HTML 中展开事件对象

@change="toggleCopyMF($event.target.checked)

因为它使调试变得更加困难。我建议将您的整个事件对象交给 toggleCopyMF() 方法,并查看事件的实际结构。也许它没有 target 成员,这就是它被视为未定义的原因。

HTML

@change="toggleCopyMF($event)

TS

toggleCopyMF(event: any) {
    console.log(event);

    // the rest of your code
}