javascript - 使用基于路由器参数的 Vue http 获取数据

Question

我四处寻找答案，并按照 vue router documentation 上的示例进行操作但我仍然有问题。我正在尝试在组件的初始加载时进行 http 调用，然后还观察路由器参数并更新来自 vue-resource 的“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 保持为空，然后每次我更新路线时，数据返回时选择的是前一个城市，而不是 route 新更新的城市。我已经尝试使用 Vue 的 created 属性代替 mounted 并且发生了同样的事情。有什么想法吗？

Answer 1

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