Fetch Data using Vue http based on Router params

Question

I have searched around for an answer to this and also followed the example on the vue router documentation but am still having issues. I am trying to do an http call on initial load of a component and then also watch the router params and update the 'get' call from vue-resource.

My vue component js looks like this...

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)
    }
  }
}

I have logged out the 'cityName' in my fetchData method and it always returns the right name, but when I append that 'cityName' to the http get call it is not returning the proper data. On initial load, this.city remains null and then each time I update the route, the data returns with the previous city selected instead of the new updated city in the route. I have tried Vue's created property in place of mounted and the same thing happens. Any ideas?

Have you tried hitting the endpoint manually (i.e. curl) to make sure it's returning the correct data? — Lee Marlow
– Lee Marlow, Commented Nov 20, 2018 at 16:02
Could you try adding :key="$route.fullPath" to your <router-view> component. — Ricky Ruiz
– Ricky Ruiz, Commented Nov 20, 2018 at 17:16

Brian Lee · Accepted Answer · 2018-11-20 16:12:25Z

4

Try changing your fetchData method to the following:

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)
}

The => function notation keeps this in context of the component.

answered Nov 20, 2018 at 16:12

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JordanBarber Over a year ago

Apparently, changing to 'created' and moving that created method to the end of my component works for some reason. But now the issue is that when I bind that data in the component's template (or pass to a child component), I get an error cannot read property of undefined. Do I need to make the component async somehow? Thanks for your help.

Collectives™ on Stack Overflow

Fetch Data using Vue http based on Router params

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related