[vue]vue中实现省市区级联

//页面

<p><select type="text" class="modalInput sadd" id="sheng" v-model="proSel">
    <option disabled="disabled" selected="selected">--请选择省--</option>
    <option v-for="(item,index) in provinceArr" :value="item.province_id">pw_item.province</option>
</select>省
<p><select type="text" class="modalInput sadd" id="shi" v-model="citySel">
    <option disabled="disabled" selected="selected">--请选择市--</option>
    <option v-for="(item,index) in cityArr" :value="item.city_id" v-if="item.p_id==proSel">pw_item.city</option>
</select>市
</p>
<p><select type="text" class="modalInput sadd" id="qu" v-model="areaSel ">
    <option disabled="disabled" selected="selected">--请选择区--</option>
    <option v-for="(item,index) in areaArr" :value="item.a_id" v-if="item.c_id==citySel">pw_item.area_name</option>
</select>区
</p>//定义数据
data:function () {
return {
proSel:'',
citySel:'',
areaSel:'',
provinceArr:[],//省
cityArr:[],//市
areaArr:[],//区
}
}

调用方法
created:function () {
this.allProvince();
this.allCity();
this.allArea()
},

methods中定义获取省市区的方法
//获取所有的省
allProvince:function () {
var that=this;
this.$axios.post(this.$api.personinfo.allProvince)
.then(function (res) {
for(let i in res.data.data){
that.$set(that.provinceArr,i, res.data.data)
}
}).catch(function (err) {
console.log(err)
})
},
//获取所有的市
allCity:function () {
var that=this;
this.$axios.post(this.$api.personinfo.allCity)
.then(function (res) {
that.cityArr= res.data.data;
}).catch(function (err) {
console.log(err)
})
},
//获取所有的区
allArea:function () {
var that=this;
this.$axios.post(this.$api.personinfo.allArea)
.then(function (res) {
that.areaArr= res.data.data;
}).catch(function (err) {
console.log(err)
})
}