Vue 一个注册页面有省市联动

    var vm = new Vue({
        el: '#complete-info',
        data: {
            provinceList: [],
            selectedProvince: "",
            cityList: [],
            selectedCity: "",
            dealerList: [],
            selectedDealer: "",
            carTypeInfo: [],
            selectedCarType: "${carType}",
            custName:"${customer.custName}"
        },
        watch: {
            selectedProvince: function (newVal, oldVal) {
                var _self = this;
                if (newVal && typeof newVal != "undefined") {
                    $.get("/basedata/area/parent/" + _self.selectedProvince, function (data) {
                        _self.cityList = data;
                    })
                }
                _self.selectedCity = "";
            },
            selectedCity: function (newVal, oldVal) {
                var _self = this;
                if (newVal && typeof newVal != "undefined") {
                    $.get("/basedata/dealer/city/" + newVal, function (data) {
                        _self.dealerList = data;
                    })
                }
                _self.selectedDealer = "";
            },
            selectedCarType: function (newVal, oldVal) {
                var _self = this;
                if (newVal && typeof newVal != "undefined") {
                    $.get("/basedata/states/cartype/"+ _self.selectedCarType, function (data) {
                        _self.provinceList = data;
                        _self.selectedProvince="";
                    });
                }
            }
        },
        methods: {
            checkInput: function(){
                var _self=this;
                if(_self.custName=="") return "请填写姓名";
                if(_self.selectedProvince=="") return "请选择省市";
                if(_self.selectedCity=="") return "请选择市区";
                if(_self.selectedDealer=="") return "请选择经销商";
                return "ok";
            },
            submit: function () {
                var errMsg=this.checkInput();
                if(errMsg!="ok"){alert(errMsg); return;}
                var _self=this;
                var _cartypes =  _self.carTypeInfo
                        .filter(function(t){if(t.chk==true)return t})
                        .map(function(t2){return t2.code})
                        .join();

                var _state=$("#home_state").find("option:selected").text();
                var _city=$("#home_city").find("option:selected").text();

                var data = {
                    mobile: "${customer.phone}",
                    name: _self.custName,
                    attentionCarCode:_self.selectedCarType,
                    dealerCode: _self.selectedDealer,
                    recieveInfoCarType: ","+ _cartypes,
                    visitSource: window.location.href,
                    stateCode: _self.selectedProvince,
                    state:_state,
                    cityCode: _self.selectedCity,
                    city: _city,
                    isFromPc: 1,
                    type: 3
                };

                $.ajax({
                    url: "/account/order/complete-customer",
                    dataType: "json",
                    data: JSON.stringify(data),
                    contentType:"application/json",
                    type: 'post',
                    success: function (item) {
                        if (item.Code == 1) {
                             window.location.href = '/order/account/activity/false';
                        } else {
                            alert(item.Msg);
                        }
                    }
                });
            }
        },
        created: function () {
            var _self = this;
            $.get("/basedata/cartypeinfo/list", function (data) {
                _self.carTypeInfo = data;
                //关注车型
                var intentions =${Intentions};
                if (intentions) {
                    _self.carTypeInfo.forEach(function (t) {
                        t.chk=false;
                        intentions.forEach(function (t2) {
                            if(t2.carType==t.code) t.chk=true;
                        })
                    })
                }
            });
        }
    });

    //加载完页面设置省
    $(function () {
        $.get("/basedata/states/cartype/${carType}", function (data) {
            vm.provinceList = data;
            vm.selectedProvince=${customer.stateCode};
        });

    });
原文地址:https://www.cnblogs.com/longling2344/p/7567789.html