The problem of passing values of Vue sub-components

problem description

when passing a value to a subcomponent, if the hierarchical relationship is complex, how can you write it grammatically to avoid reporting an error?

as in the following code, when initializing a component, the default value is empty, so an error will be reported.

of course, these variables can still be passed correctly to the subcomponent after getting the value, but I still want to eliminate the error warning.

related codes

<children :data.sync="data.arr[activeArr[0]]" />
...
data() {
    return {
        activeArr: [],
        data: {arr: []}
    }
}

error message actually seen

clipboard.png

Mar.17,2022

 <children :data="data.arr[activeArr[0]]" v-if="data.arr[activeArr[0]]"/>
...
data() {
    return {
        activeArr: [],
        data: {arr: []}
    }
}

define another value dataList = data.arr [activeArr [0]] | |'', it is best to use asynchronous components to render


this error should have occurred in < children >, right?
use computed ~

<children :data="data4Children" />
computed: {
    data4Children: function(){
        return this.data.arr[this.activeArr[0]] || {}
    }
},

activeArr [0] is there any value? No, that's undefined ,
then data.arr [activeArr [0]] , that's property 'undefined' of undefined

.

activeArr [0] & & data.arr [activeArr [0]] try this?

is to determine whether the attribute of this object exists before using it, and then use it. If it is not available, it will report an error Cannot read property 'undefined' of undefined .

Menu