vue三级联动

<select @change="getArea(province_id,1)" v-model="province_id">
                              <option value="">请选择省</option>
                              <option v-for="item in province" :value="item.area_id">{{item.area_name}}</option>
                          </select>
                            <select @change="getArea(city_id,2)" v-model="city_id">
                              <option value="">请选择市</option>
                              <option v-for="item in city" :value="item.area_id">{{item.area_name}}</option>
                          </select>
                            <select v-model="country_id">
                              <option value="">请选择区/县</option>
                              <option v-for="item in country" :value="item.area_id">{{item.area_name}}</option>
                          </select>
app = new Vue({
                el: '#app',
                data: {
                    province: [],
                    city: [],
                    country: [],
                },
                methods: {
                    getArea: function(id, type) {
                        var that = this;
                        flyPost('api/index/getarea', {
                            _ajax: 1,
                            id: id
                        }).then(function(res) {
                            console.log(id);
                            if (res.code == 1) {
                                if (id == 0) {
                                    that.province = res.data;
                                } else {
                                    if (type == 1) {
                                        that.city = res.data;
                                    } else if (type == 2) {
                                        that.country = res.data;
                                    }
                                }
                            } else {
                                showAlert({
                                    title: '提示',
                                    message: res.msg
                                });
                            }
                        }.bind(this)).catch(function(err) {
                            //console.log(err);
                        });
                    }
                },
                mounted: function() {
                    var that = this;
                    that.getArea(that.id);
                }
            })
原文地址:https://www.cnblogs.com/shark1100913/p/10243165.html