Cannot read properties of undefined (reading ‘push‘) 问题

Symptom

• When you click the Modify button in the list page, enter the form page, go to the corresponding tab, click the Add button, click OK to save after entering the content, and find that the newly added data is not added to the corresponding list in the tab.
• However, if you are on the list page from the beginning, click the Add button, enter the form page, and then go to the corresponding tab, the new record will be displayed normally in the list.
• If filter() is added to the data bound to the table in the form, click the modify button in the list, and find that the form page cannot be entered, and it has been stuck
  <el-table class="table" border :data="inputForm.tbBDevList.filter(function(item){return item.delFlag !== '1'})" style="width: 100%">

The front end reports two attribute undefined errors

Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'filter')"

found in

---> <TbBShipBaseForm> at src/views/modules/lep/monitor/ship/TbBShipBaseForm.vue
       <TbBShipBaseList> at src/views/modules/lep/monitor/ship/TbBShipBaseList.vue
         <MainContent> at src/views/layout/_common_center.vue
           <Main> at src/views/main.vue
             <App> at src/App.vue
               <Root>

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'push')"

found in

---> <TbBDevForm> at src/views/modules/lep/monitor/dev/TbBDevForm.vue
       <TbBShipBaseForm> at src/views/modules/lep/monitor/ship/TbBShipBaseForm.vue
         <TbBShipBaseList> at src/views/modules/lep/monitor/ship/TbBShipBaseList.vue
           <MainContent> at src/views/layout/_common_center.vue
             <Main> at src/views/main.vue
               <App> at src/App.vue
                 <Root>

Troubleshooting
I always thought that there was a problem with the front-end code. After comparing the code for more than two hours, I found no difference.
Later, I asked my colleagues to help in the investigation, and found through the debugger:

• It is indeed through modification. In the corresponding form of the tab, add a new record, click OK, in the corresponding method, the array displays undefined; and the new addition from the list page is defined.

After working for a long time, I also found something strange. Later, I simply tried to copy the reference code directly, tested it, and found that I entered from the modify button at this time, and added a new record, no problem (at this time, I didn’t realize the real The problem lies, I thought it was the process of code copying, where did I miss it).

So, I copied it again and found that it was indeed normal. Then add the filter method, click the Modify button, and the form page can be opened normally.

Never thought, when I click the modify button of a record in the list, enter the corresponding form page, and find that this record is not assigned to the form field. Then I realized that the back-end interface must be adjusted according to the current record id, the data obtained by querying, and the code that assigns value to the form data must be wrong.

After a closer look, sure enough, the assignment parameters in the callback function were not changed correctly. So I calmly corrected. At this time, it was found that the two bugs that appeared at the beginning began to reproduce.

The explanation must have nothing to do with the front-end code. My colleagues suddenly realized that this is because the data obtained by clicking the modify button and calling the back-end interface does not have this array parameter, so the parameter undefined error has been reported.

My colleague hurried over, opened the back-end code, and took a closer look. Sure enough, there is no terminal device array defined, so the back-end returns the front-end data without this array parameter, which verifies the previous conjecture.