html:
? <li>
? ? ? ? ? ? <img src="../../image/add-address-icon3.png" alt="">
? ? ? ? ? ? ?<select v-model="cur_pro" >
? ? ? ? ? ? ? ?<option :value="pro.id" v-for="pro in province_data">{{pro.region_name}}</option>
? ? ? ? ? ? ?</select>
? ? ? ? ? ? ?<select name="city" v-model="cur_city" v-if="city_data">
? ? ? ? ? ? ? ? <option :value="city.id" v-for="city in city_data">{{city.region_name}}</option>
? ? ? ? ? ? ? </select>
? ? ? ? ? ? ? <select name="area" v-model="cur_area" v-if="area_data">
? ? ? ? ? ? ? ? ?<option :value="area.id" v-for="area in area_data">{{area.region_name}}</option>
? ? ? ? ? ? ? ? </select>
? ? ? ? </li>
js:
var vm=new Vue({
? ? ? el:'#app',
? ? ? data:{
? ? ? ? province_data:[],
? ? ? ? city_data:null,
? ? ? ? cur_pro:0,
? ? ? ? cur_city:0,
? ? ? ? area_data:null,
? ? ? ? cur_area:0
? ? ? },
? ? ? created:function(){
? ? ? ? var that = this;
? ? ? ? //請求省份數據
? ? ? ? apiRequest('region/index', {}, function(res,err){
? ? ? ? ? ? that.province_data = res.data;
? ? ? ? ? ? that.cur_pro=that.cur_pro ? that.cur_pro : res.data[0].id;
? ? ? ? ? ? apiRequest('region/index', {'parent_id':that.cur_pro}, function(res,err){
? ? ? ? ? ? ? ? that.city_data = res.data;
? ? ? ? ? ? ? ? that.cur_city = that.cur_city ? that.cur_city : res.data[0].id;
? ? ? ? ? ? ? ? apiRequest('region/index', {'parent_id':that.cur_city}, function(res,err){
? ? ? ? ? ? ? ? ? ? that.area_data = res.data;
? ? ? ? ? ? ? ? ? ? that.cur_area = that.cur_area ? that.cur_area : res.data[0].id;
? ? ? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ? });
? ? ? },
? ? ? watch:{
? ? ? ? //監聽級聯
? ? ? ? cur_pro(){
? ? ? ? ? var that = this;
? ? ? ? ? apiRequest('region/index', {'parent_id':that.cur_pro}, function (res,err) {
? ? ? ? ? ? that.city_data = res.data;
? ? ? ? ? ? that.cur_city = res.data[0].id;//解決選中省份及城市后另選省份時城市顯示非第一位的bug
? ? ? ? ? });
? ? ? ? },
? ? ? ? cur_city(){
? ? ? ? ? var that = this;
? ? ? ? ? apiRequest('region/index', {'parent_id':that.cur_city}, function (res,err) {
? ? ? ? ? ? that.area_data = res.data;
? ? ? ? ? ? if(res.data.length!=0){
? ? ? ? ? ? ? that.cur_area = res.data[0].id
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? }
? ? ? }
}
})
待更~~
