Vue in the drop-down box to pass el-select default values

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>

@changeReal-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

Published 38 original articles · won praise 1 · views 5160

Guess you like

Origin blog.csdn.net/ShangMY97/article/details/103952615