创新实训（二十三）

在测试时我们又发现了一个bug，就是在搜索景点时如果切换城市重新搜索，那么景点的名字和地址（页面直接传进去的部分）会改变，但是景点图片、评分和介绍（子组件自己调用方法的部分）不会改变。

后来我发现这是因为我把子组件调用方法写在了组件创建时，而页面刷新时子组件并不会重新创建，也就不会重新调获取信息的方法。解决这个问题也不难，就是在子组件中加入监听器监听组件中地址属性的改变，改变时再次调用获取信息的方法即可。

代码如下：

  methods: {
    getInfos() {
      this.loading=true;
      this.$axios({
        method: "get",
        url: "http://127.0.0.1:8000/api/getSpotsInfo",
        params: {
          city: this.city,
          name: this.name,
        },
      })
        .then((res) => {
          // console.log(res.data.results); //在console中看到数据
          var array = res.data.data;
    this.loading=false;
          if (array == undefined || array.length <= 0) {
            console.log("no");
          } else {
            this.imgsrc = array.imgsrc;
            this.rank = array.rank;
            this.score = array.score;
    if(this.rank&&this.rank!=0){
      this.hasRank=true;
    }
    if(this.score&&this.score!="0.0"){
      this.hasScore=true;
    }
            this.description = array.description;
          }
        })
        .catch((res) => {
          // alert("出错了！");
        });
    },

  },

  watch:{
    address:'getInfos'
  },
  mounted() {
    this.loading=true;
    this.getInfos();
  },