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

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

xmlhttprequest vuejs2 get vue.js javascript

1

JordanBarber · 技术社区 · 7 年前

我已经四处搜索了这个问题的答案,并遵循了 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 回复 | 直到 7 年前

1

2

Brian Lee 7 年前

尝试更改您的 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 在组件上下文中。