利用v-model，v-for，select实现三级连锁下拉菜单 省市县选择

HTML

<div id="address">
　　<label>地址</label>
　　<select id="province" v-model="provinceId" class="form-control">　　
　　　　<option v-for="province in provinces" :value="province.districtId" v-on:click="selectProvince()">{{province.districtName}}</option>
　　</select>
　　<select id="city" v-model="cityId" class="form-control">
　　　　<option v-for="city in citys" :value="city.districtId" v-on:click="selectCity()">{{city.districtName}}</option>
　　</select>
　　<select id="county" v-model="countyId" class="form-control">
　　　　<option v-for="county in countys" :value="county.districtId">{{county.districtName}}</option>
　　</select>
</div>
<script src="../js/productUpload.js" type="text/javascript"></script>　　<!-- 必须在vue作用的标签之后引用关于vue的js -->

 

 

JS

$(function(){    //初始化加载
    initAddress();
})

function initAddress() { //加载省份信息
    axios.get("http://192.168.1.106:8080/v/address/province")
    .then(function(response){
        var provinces = response.data.data.districts;
        address.provinces = provinces;
    })
  .catch(function(error){
      console.log("error:"+error);
  });
}

var address = new Vue({
    el:'#address',
    data:{
        provinceId:"",
        provinces:"",
        cityId:"",
        citys:"",
        countyId:"",
        countys:"",
    },
    methods:{
        selectProvince: function(){
            console.log("provinceId:"+this.provinceId);
            axios.get("http://192.168.1.106:8080/v/address/city",{
                params:{
                    provinceId: this.provinceId,
                }
            })
            .then(function(response){
                var citys = response.data.data.city;
                address.citys = citys;
                // this.citys = citys;　　//两者区别很大，上者可以实现动态效果，具体原因不明
                address.countys = "";
            })
            .catch(function(error){
                console.log("error: "+error);
            });
        },
        selectCity:function(){
            console.log("cityId:"+this.cityId);
            axios.get("http://192.168.1.106:8080/v/address/county",{
                params:{
                    cityId: this.cityId,
                }
            })
            .then(function(response){
                var countys = response.data.data.county;
                address.countys = countys;
                // this.countys = countys;　　//两者区别很大，上者可以实现动态效果，具体原因不明
            })
            .catch(function(error){
                console.log("error: "+error);
            });
        },
    }
});

 参考博文：1. https://blog.csdn.net/qq_41802303/article/details/80080101