TypeError: Cannot read property 'checked' of undefined

Question

I get this error in the console when I put in the time for the Monday From and Monday To inputs in the code below I have a switch that I want to copy the times I put in for Monday From/To for the rest of the week. Why am I geting this error and what do I do to fix it.

Here is the code for the toggle switch button

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

Inputs for Monday to/from and Tuesday to/from

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

Function in typescript file

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

Answer 1

It's not recommendable to unfold the event-object in your HTML

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

because it makes debugging harder. I'd suggest to hand your entire event-object over to the toggleCopyMF() method and have a look at what event's structure actually is. Maybe it does not have a target member and that's why this is seen as undefined.

HTML

@change="toggleCopyMF($event)

TS

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

    // the rest of your code
}