Sample code for the two-way linkage effect of Vue drop-down box

1. Preface

When developing front-end pages, you often need to write a drop-down box. Common drop-down boxes include a drop-down box that writes fixed values on the page, and a list of values obtained by calling back-end interface services. Whether it is the original jsp page html page, etc., or the popular vue, etc., the logic is the same. This article explains how multiple drop-down boxes can achieve two-way linkage effect in the VUE page.

2. Code examples

2.1 Fill in the <el-form form of the vue page, which is option A and option B, as shown below:

    &lt;el-col :span="12"&gt;
        &lt;el-form-item label="Option A"  prop="A"&gt;            
          &lt;el-select style="width: 100%;" @change="changeAList($event)"
            v-model=""
            filterable
            remote
            clearable
            placeholder="Please select"
            :remote-method="getAMethod"
            :loading="loading"&gt;
            &lt;el-option
              v-for="item in ListA"
              :key=""
              :label=""
              :value=""&gt;
            &lt;/el-option&gt;
          &lt;/el-select&gt;
        &lt;/el-form-item&gt;
      &lt;/el-col&gt;
      &lt;el-col :md="12" &gt;
        &lt;el-form-item label="Option B"  prop="B"&gt;            
          &lt;el-select style="width: 100%;" @change="changeBList($event)"
            v-model=""
            filterable
            remote
            clearable
            placeholder="Please select"
            :remote-method="getBMethod"
            :loading="loading"&gt;
            &lt;el-option
              v-for="item in ListB"
              :key=""
              :label=""
              :value=""&gt;
            &lt;/el-option&gt;
          &lt;/el-select&gt;
        &lt;/el-form-item&gt;
      &lt;/el-col&gt;

2.2 Define two list sets in the return module of data to load the data list sets of options A and options B.

data() {
    return {
              ListA: [],
              ListB: [],
        }

2.3 In the methods: method area, define the drop-down box option to load the method obtained from the background interface service. getAMethod is used to load the drop-down box content of option A. getBMethod is used to load the drop-down box content of option B.

   getAMethod(temp) {
        (temp)
        .then(response =&gt; {
          if( &amp;&amp;  == 200){
            = []
            var result = 
            let jsonObj = (result);
            for (let k of (jsonObj)) {
              (
                {
                  label: k,
                  value: jsonObj[k].propertyA,
                }
              )
            }
          }
        })
      },
      getBMethod(temp) {
        XXAPI.getDicValue2(temp)
        .then(response =&gt; {
          if( &amp;&amp;  == 200){
             = []
            var result = 
            let jsonObj = (result);
            for (let k of (jsonObj)) {
               .push(
                {
                  label: k,
                  value: jsonObj[k].propertyB,
                }
              )
            }
          }
        })
      },

The above steps only complete the basic framework construction, that is, the data collection loading of the backend and front-end and the interface service call to obtain the data collection, etc.

2.4 Implement linkage. Everyone knows that in the vue page, if you want to dynamically change the values of multiple <el-select drop-down boxes, you must call the @change function. That is, the ones already marked in Figure 1:

@change="changeAList($event) and @change="changeBList($event)

Through these two methods, the two pull-down boxes can be achieved.

Also define methods in the methods: method area:

   changeBList(e){
      (e)
    },
   changeAList(e){
      (e)
    },
 
     indexSelectB(e){
        if( == undefined ||  .length <= 0){
            ();
        }
        let i = 0;
        for (i = 0;i< .length;i++) {
          if ( [i].label == e){
            =  [i].value;
            break
          }
        }
      },
      indexSelectA(e){
        if( == undefined ||  <= 0){
            ();
        }
        let i = 0;
        for (i = 0;i<;i++) {
          if ([i].label == e){
            = [i].value;
            break
          }
        }
      }

The above method can realize the two-way linkage of the two drop-down boxes of Option A and Option B. However, there is a small flaw, and the data must be loaded after characters are entered.

This is because when the page is created, the background data is loaded. It is also very simple to achieve this effect. You only need to call two methods to load the background interface service in the created module, as follows:

created() {
    ...
    ();
    ();
    ...
  },

This is the article about the two-way linkage of Vue drop-down boxes. For more related content on Vue drop-down boxes, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!