HTML structure
<div class="config-item">
<el-form-item label=""></el-form-item>
<div v-for="item in exConfig " :key="item.exConfigKey" class="test-config-item">
<el-form-item label="">{{item.exConfigName}}</el-form-item>
<el-form-item label="" >
<el-input v-model="item.testExConfig[item.exConfigKey]" @change="testChange(item)"></el-input>
</el-form-item>
<el-form-item label="">
<el-input v-model="item.releaseExConfig[item.exConfigKey]" @change="releaseChange(item)"></el-input>
</el-form-item>
</div>
</div> js structure
is written in created
this.$nextTick(() => {
this.$axios.post("/mock/dtp-admin/market/detail").then(res => {
this.exConfig = res.data.exConfig;
this.$axios.post("/mock/dtp-admin/hotel/detail").then(res => {
let data1 = res.data.releaseExConfig;
let data2 = res.data.testExConfig;
this.exConfig = this.exConfig.map(item => ({
...item,
releaseExConfig: { [item.exConfigKey]: data1[item.exConfigKey] },
testExConfig: { [item.exConfigKey]: data2[item.exConfigKey] },
}));
console.log(this.exConfig[0].testExConfig.itemCode1);
});
});
}); idea: take two interfaces in created to get the data, re-traverse and combine the data to get a new data structure, and then put it into html traversal and render it.
the structure after exConfig reorganization is as follows
exConfig:[{
exConfigName:"1",
exConfigKey:"itemCode1",
data1:{
itemCode1:"900001"
},
data2:{
itemCode1:"900001"
}
},
{
exConfigName:"3",
exConfigKey:"itemCode2",
data1:{
itemCode2:"900002"
},
data2:{
itemCode2:"900002"
}
},
{
exConfigName:"4",
exConfigKey:"itemCode3",
data1:{
itemCode3:"900003"
},
data2:{
itemCode3:"900003"
}
},
{
exConfigName:"6",
exConfigKey:"itemCode4",
data1:{
itemCode4:"900004"
},
data2:{
itemCode4:"900004"
}
}]an error is reported after the page is rendered, but the problem cannot be located
Don"t question whether there is a problem with itemCode1. This must exist
