When requesting the interface, the entire interface can be completely rendered without any problem, but the developer tool still reports the error "Error in render: "TypeError: Cannot read properties of undefined (reading 'ipconfig')", as detailed below. To solve the error, it means that the template
is
in When rendering, when reading the attribute value of an object in the object, the object does not exist. To put it simply, it is the three-level expression abc. There is no object b in object a, so reading the value in object abc will naturally Report an error. If it is a two-level expression ab, no error will be reported, and undefined will be returned.
After understanding the reason, I started to troubleshoot the code and found that there were three levels of expressions in the Vue template code below, which was very suspicious. The error should be here, but why?
Reason:
We found that the queryData here is the data loaded by state management in vuex, asynchronously called to display, and then in the vue rendering mechanism:
Asynchronous data displays the initial data first, and then displays the data with data.
Therefore, when loading queryData, it is still an empty array as follows.
After the rendering is completed, the asynchronous data is loaded.
Therefore, when rendering, the three-layer expression that appears is taken from the queryData[0] array. The object with the subscript 0 in the queryData[0] array does not yet exist. , and then an error will naturally be reported when taking other values from this object. However, after the rendering is completed, the value in queryData is loaded and can be obtained naturally. This also explains why the interface displays normally, but the developer tool reports an error.
[Solution]:
Add the v-if judgment condition to the above div. If queryData[0] cannot be obtained, the problem can be solved by not loading the div. (Note that v-show cannot be used. The mechanism of v-show is to determine whether to display based on conditions after loading)
