When the data of the vue.js parent component is passed to the child component, only the this can be obtained, but not the this.xxx attribute.

problem description

in the parent component, the this and its properties can be obtained in methods, created, and mounted, but when passed in data, only the this instance can be obtained, but the this.xxx property cannot be obtained.

related codes

parent component structure code

   

ask the boss how to solve the problem and why?. Thank you very much

May.26,2021

The reason for the

is simply that Vue mounts the properties of the data object on the this (Vue instance in a certain period. Therefore, during the creation of the data function, the properties on the data cannot be accessed through the this (Vue instance, so there is no sortList property on your this.

specific modification method:
modify the data function of the parent component, refer to pseudocode

data() {
    const sortList = [xxx,xxx,xxx]
    return {
        sortList: sortList,
        merchantAddFormItems: [
           xxxxx,
           options: sortList
        ]
    }
}
Menu