Here point form into a directory is required to pass a default value to the background contents drop-down box, and requires the display Chaoyang District, then, to the backed '1', rather than numeric string
1. SUMMARY drop-down box is passed over the background
<el-select v-model="dqId" id="dqId" @change="getDataList">
<el-option v-for="item in dqList" :key="item.dqId" :label="item.name" :value="item.dqId"></el-option>
</el-select>
@change
Real-time access to content drop-down box, the content changes once, calls it the entire page back links, pay attention to where you can not use @input
, or passed the background of drop-down box contents will be delayed once, for example, when I come in default is 'Chaoyang', I switch to the 'Changping District', dqid information to the background or the corresponding Chaoyang District, until once again I will choose to switch to the Changping District, so in order to avoid this problem, we use @change
2. because you want a default display information, so we direct the data () { return {}}
initial default values set dqid, and dqid: '朝阳区'
let the drop-down box default value Chaoyang District, but this setting, we pass digital background dqid not corresponding, we use this method to solve the first step 3 problem
data () {
return {
dqid: '朝阳区'
}
}
3. The first introduce function activated (),
activated (): In case vue survival of the subject, into the presence of activated current () function of the page, a page is triggered to enter; may be used to initialize the page data,
So we called when the page has been entered in this drop-down box content, and give back pass dqid assigned numbers corresponding to the Chaoyang District
activated () {
this.$http({
url: this.$http.adornUrl('xxx下拉框内容链接'),
method: 'get'
}).then(({data}) => {
console.log(JSON.stringify(data))
if (data && data.code === 0) {
this.dqList = data.list
} ......
}),
this.$http({
url: this.$http.adornUrl('XXX表单链接'),
method: 'get',
params: this.$http.adornParams({
'dqId': '1' //在这里我们就把dqid对应的第一个默认值传给后台了
})
}).then(({data}) => {
......
})
},
4. Finally, we have to switch the drop-down box to switch form information content
methods: {
getDataList () {
this.$http({
url: this.$http.adornUrl('XXX表单链接'),
method: 'get',
params: this.$http.adornParams({
'dqId': this.dqId
//这里让每切换一次表单里现在有的内容就把对应的dqid传给后台,注意这里和‘3’,中的内容是不一样的
})
......
There is a problem please correct me