代码之家  ›  专栏  ›  技术社区  ›  JordanBarber

使用基于路由器参数的Vue HTTP获取数据

  •  1
  • JordanBarber  · 技术社区  · 6 年前

    我已经四处搜索了这个问题的答案,并遵循了 vue router documentation 但我还是有问题。我正在尝试对组件的初始加载进行HTTP调用,然后观察路由器参数并从Vue资源更新“get”调用。

    我的Vue组件JS看起来像这样…

    export default {
      name: 'city',
      components: {
        Entry
      },
      data () {
        return {
          city: null
        }
      },
      mounted() {
        this.fetchData();
      },
      watch: {
        '$route': 'fetchData'
      },
      methods: {
        fetchData() {
          const cityName = this.$route.params.name;
          this.$http.get('http://localhost:3000/cities?short=' + cityName).then(function(response){
            this.city = response.data;
          }, function(error){
            alert(error.statusText);
          });
          console.log(cityName)
        }
      }
    }
    

    我已经在fetchdata方法中注销了'cityname',它总是返回正确的名称,但是当我将该'cityname'附加到HTTP GET调用时,它没有返回正确的数据。在初始加载时,this.city保持为空,然后每次更新路由时,数据都会返回之前选择的城市,而不是路由中新更新的城市。我试过Vue的 created 财产代替 mounted 同样的事情也发生了。有什么想法吗?

    1 回复  |  直到 6 年前
        1
  •  2
  •   Brian Lee    6 年前

    尝试更改您的 fetchData 方法如下:

    fetchData() {
      const cityName = this.$route.params.name;
      this.$http.get('http://localhost:3000/cities?short=' + cityName).then((response) => {
        this.city = response.data;
      }, (error) => {
        alert(error.statusText);
      });
      console.log(cityName)
    }
    

    这个 => 函数符号保持 this 在组件上下文中。