The Vue child component passes an object reference through props. The parent component data has changed, but there is no change within the child component.

has not done much front-end, the company"s business needs to temporarily learn the vue, please ask the eldest brother to advise.

I sent a reference called "cur_project" in the subcomponent through props. There is a subarray "list_dbsource" in "cur_project". I dynamically added content to this array elsewhere, but there is no change in the subcomponent.

The

subcomponent goes like this:

Vue.component("item-database", {
        props: ["title","cur_project","dbinfo"],
        template: "<div><h3>{{title}}</h3>" +
        "

source:" + "<el-select v-model="dbinfo.srcname" placeholder="" size="small">" + "<el-option" + "v-for="item in cur_project.list_dbsource"" + ":key="item.source_name"" + ":value="item.source_name"></el-option>" + "</el-select>

" + "

dbname:{{dbinfo.dbname}}

</div>", })

I push () objects in list_dbsource, but nothing new in this el-option is drawn.
ask for advice on how to make child components change with the change of parent component data

Dec.30,2021

mmp, studied for a long time and solved by myself, put

'<el-option' +
        'v-for="item in cur_project.list_dbsource"' +
        ':key="item.source_name"' +
        ':value="item.source_name"></el-option>' +
Remove the newline of

and change it to the same line. Write it as follows

template: '<div><h3>{{title}}</h3>' +
        '

source:' + '<el-select v-model="dbinfo.srcname" placeholder="" size="small">' + '<el-option v-for="item in cur_project.list_dbsource" :key="item.source_name" :value="item.source_name"></el-option>' + '</el-select>

' + '

dbname:{{dbinfo.dbname}}

</div>',

what the heck! Which big brother can explain it?

Menu