创新实训（十一）

最新推荐文章于 2024-06-24 00:45:30 发布

Merlin_Marico

最新推荐文章于 2024-06-24 00:45:30 发布

阅读量60

点赞数

本文链接：https://blog.csdn.net/Merlin_Marico/article/details/117115892

版权

本文介绍了一种在Vue.js应用中实现动态加载城市选择的方法，通过监听省份选择框的变化，调用百度地图API获取相应省份的城市列表。在直辖市情况下，直接设置城市为直辖市名称，否则从API获取并填充城市选择框。由于Vue组件的更新限制，需要使用`$forceUpdate()`强制更新视图以显示新数据。

摘要由CSDN通过智能技术生成

在写查询酒店的页面的时候，需要先让用户输入需要搜索的城市，再对相应的城市进行景点检索。由于百度地图api可接受的最大的城市级别为市（包括直辖市），因此需要两个选择框，先让用户选择省份（直辖市），再根据第一个选择框的内容确定第二个选择框的城市。每个省份的所有城市可以通过百度地图api得到。

我的想法是为第一个选择框添加选择改变的时候会触发的方法，根据第一个输入框的内容判断第二个输入框是否可用（直辖市），再调用百度地图api的方法返回该省份的城市信息，并显示在第二个选择框中。但在我实际操作的时候，却发现将返回值传到第二个选择框绑定的数组后，第二个选择框中的内容并没有改变。查阅资料后发现，我只改变了数组中的部分数据，这样的改变并不会使选择框这个组件重新渲染，因此我需要调用this.$forceUpdate();方法，对页面进行强制刷新，才能将变化显示在页面中。

	findCitys(prov) {
      this.city = "";
      this.citys = [];
      if (
        prov == "北京市" ||
        prov == "天津市" ||
        prov == "上海市" ||
        prov == "重庆市"
      ) {
        this.hasCity = false;
        this.city = prov;
      } else {
        this.hasCity = true;
        var url =
          "http://api.map.baidu.com/place/v2/search?query=" +
          encodeURIComponent("商圈") +
          "&region=" +
          encodeURIComponent(prov) +
          "&output=json&page_size=20&ak=***"+"&callback=getCitys";
        this.$jsonp(url)
          .then((res) => {
             this.getCitys(res);
          })
          .catch((res) => {
            alert("百度出错了！");
          });
      }
    },

    getCitys(res){
      this.loading = false;
            var array = res.results;
            if (array == undefined || array.length <= 0) {
              console.log("no");
            } else {
              array.forEach((item, index, array) => {
                this.citys.push(item.name);
                this.$forceUpdate();
              });
            }
    },