vue el-select default value

Scenario: When rendering data after calling the interface, the selected select needs to be set as the default value. The specific case is that after calling the province data, the corresponding city data is obtained according to the province, and the corresponding el-select selects the data by default status

Question: I saw a lot on the Internet that directly change the value of the v-model bound to el-select, so that it will fall into the select box and just display the corresponding text (you can judge according to the selected state of el-select, select Then click to open the drop-down list (blue bold font), which will cause the city option that needs to be displayed according to the province option to directly display the no data status on the initialization page.

And most of the el-options use: key="item.value", the data label in the interface is the name, and value is the id value

<div >
          <p>发货地</p>
          <el-select v-model="deliverProvince" 
          ref="getdeliverProvince"
          clearable 
           placeholder="请选择省份"
           @change="changeProvince"
           >
            <el-option
              v-for="item in deliverProvinceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
            </el-select>
          <el-select v-model="deliverCity" clearable 
           placeholder="请选择城市"
           >
            <el-option
              v-for="item in search_city_option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

After thinking about it, the logic should be optimized, or there are other methods, such as adding some functions in beforemount, but let’s do this first

 // 需要根据数据列表中的value值绑定
 getdeliverlocation() {
      for (let i in this.deliverProvinceList) {
        if (this.fhlocal[0] == this.deliverProvinceList[i].label) {
          this.deliverProvince = this.deliverProvinceList[i].value;
          this.search_city_option = [];
          this.deliverCity = "";
          this.changeFormatCity(
            this.search_city[this.deliverProvince],
            this.search_city_option
          );
        }else if(this.fhlocal[0].includes(this.deliverProvinceList[i].label)){
          this.deliverProvince = this.deliverProvinceList[i].value;
          this.search_city_option = [];
          this.deliverCity = "";
          this.changeFormatCity(
            this.search_city[this.deliverProvince],
            this.search_city_option
          );
        }
      }
      for (let n in this.search_city_option) {
        if (this.fhlocal[1] == this.search_city_option[n].label) {
          this.deliverCity = this.search_city_option[n].value;
        } else if (this.fhlocal[1].includes(this.search_city_option[n].label)) {
          this.deliverCity = this.search_city_option[n].value;
        }
      }
    },