promise再爱我一次之省市区范围选择
0. 背景
省市区选择嘛,懂得都懂。后台返回我1个Object对象,装着全国的省,选择省后依次选择市、区。我没想到这玩意可以纠缠我快三小时的。
1. 难点
prov city area 省 市 区
省可以默认拿一下,市区都需要依靠前面的选择生成。一般watch一下prov/city值就行了是吧,但我这个憨憨,用了el-form。这两个值成为对象中的数值,直接watch是不行了的,(我用/deep/也不行,??)。但是,我们有机智的computed啊!所以~
2. 解决
computed: {
prov: {
get() {
return this.form.regionProv;
},
},
city: {
get() {
return this.form.regionCity;
},
},
}
watch: {
// When change prov OR city, region value after it need clear.
prov() {
this.getRegion();
this.form.regionCity = "";
this.form.regionArea = "";
},
city() {
this.getRegion();
this.form.regionArea = "";
},
},
上面的是先把prov city这两个需要监听的值,从this.form这个对象中分离出来。真正实现获取省市区数据的还是靠这个方法:
async getRegion() {
if (this.form.regionProv === "") {
this.regionProvArr = await getRegion(0).then((res) => {
return res.data;
});
} else {
if (this.form.regionCity === "") {
this.regionCityArr = await getRegion(this.form.regionProv).then(
(res) => {
return res.data;
}
);
} else {
if (this.form.regionArea === "") {
this.regionAreaArr = await getRegion(this.form.regionCity).then(
(res) => {
return res.data;
}
);
}
}
}
},
注意这里的async await,不加得到的是promise中的