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中的!!!

相关