javascript - vue reports an error when passing objects through props

Question

Parent component App.vue

Subcomponent sonCp.vue

data structure

Error reported but data can be rendered

Please help me find out if I am getting the data correctly. Should I put it in created?

Answer 1

The subcomponent initially got an empty string and did not have attributes such as .acount.name, so an error occurred.

Easiest solution:

in parent component App.vue

<sonCp :dataObj="dataObj" />

Changed to:

<sonCp :dataObj="dataObj" v-if="dataObj" />

Answer 2

Asynchronously requested data will be rendered twice! The first time is when the request is not completed. At this time, obj is returned by you''. Then when the subcomponent gets the value, an error must occur! The second time is when the request is returned, and then there is data. So the solution is obvious, there are many solutions.

Answer 3

Initially, dataObj is a null character, so an error will definitely be reported when passed to the subcomponent. You can use v-if to determine whether the data has been obtained, and then render it after obtaining it.

Answer 4

1. As mentioned above, use v-if to determine dataObj.length in the dom to ensure rendering when there is data (recommended!!)

2. Set the data structure of the dataObj object in the parent component data option in advance, such as:

data() {
    return {
        dataObj: {
            id: '',
            account: {
                name: '',
                age: ''
            }
        }
      
    };
}

In addition, it is recommended that the author try to select the appropriate data type and assign the default value when reserving the initial item in the data option. For example, the dataObj in the parent component should store an array type. Try to dataObj: [], so that the semantic expression is also clear.

Answer 5

<son-cp :data-obj="dataObj"></son-cp>