Vue-class-component: Property or method xxx is not defined on the instance but referenced during render.

[liudonghua123]

I have a Record component which contain a RecordHistoryModal component in its template. And the showHistoryRecords, handleSubmit are methods of Record. But when I show the RecordHistoryModal, I got Property or method "showHistoryRecords" is not defined on the instance but referenced during render. error. The full error log shown these method are not in RecordDetailModal.

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "showHistoryRecords" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <RecordDetailModal> at src/views/patient/RecordDetailModal.vue
       <Anonymous>
         <Anonymous>
           <Anonymous>
             <Anonymous>
               <AModal>
                 <RecordHistoryModal> at src/views/patient/RecordHistoryModal.vue
                   <AForm>
                     <class2> at src/views/patient/Record.vue
......

However the showHistoryRecords, handleSubmit did work although these errors.

[ktsn]

Thanks for filing issue. Please provide a self-contained reproduction when you report a bug. Thanks!

[liudonghua123]

I found the problem, I made a mistake reference showHistoryRecords, handleSubmit in my RecordHistoryModal where I did not define such methods.

[Ding-Fan]

In my situation, the warning is showing because I initialized the property with undefined .

private typeId: any = undefined

I changed the initial value to empty string then the warning is gone.

private typeId: any = ''

[CreeTar]

In my situation, the warning is showing because I initialized the property with undefined .

private typeId: any = undefined

I changed the initial value to empty string then the warning is gone.

private typeId: any = ''

Why would that be correct? undefined should be allowed.

[Ding-Fan]

In my situation, the warning is showing because I initialized the property with undefined .

private typeId: any = undefined

I changed the initial value to empty string then the warning is gone.

private typeId: any = ''

Why would that be correct? undefined should be allowed.

It’s long time ago, I don’t have access to the code anymore. But I guess something in the JSX screwed up with the “undefined”. In JavaScript/TypeScript it’s not a surprise to find out something allowed made a bug 👾