Update DOM after fetching from API in VueJS

Question

I am having troubles updating the DOM after fetching from an API.

My object is fetching the data correctly but the DOM is being rendered before and it won't update after receiving the API Data, I can't seem to understand why is not updating itself.

Here is my code:

<template>
  <div>
    <h1>Weather</h1>
    {{ weather }} 
  </div>
</template>

<script>
export default {
  name: 'Weather',

data() {
    return {
      weather : {},
    }

  },
  created() {
      this.getWeather()
  },

  methods: {
    async getWeather() {
      let self = this;
          try {
            const response = await fetch('https://api.weatherbit.io/v2.0/current?city=Berlin&country=DE&key=KEY');
            const myJson = await response.json();
            self.weather.temp = myJson.data[0].temp;
            self.weather.sensation = myJson.data[0].app_temp;
            self.weather.description = myJson.data[0].weather.description;
        } catch (error) {
            console.error(error);
        }
    }

</script>

Furqan Ansari · Accepted Answer · 2019-11-15 15:54:00Z

2

You should assign the response value to the weather property directly like this.

methods: {
   async getWeather() {
     let self = this;
         try {
           const response = await fetch('https://api.weatherbit.io/v2.0/current?city=Berlin&country=DE&key=dcbea1b771ab41f09cd6b138d8cd50c2');
           const myJson = await response.json();
           self.weather = myJson.data[0].temp;
           console.log(self.weather);
       } catch (error) {
           console.error(error);
       }
   }
 }

Here is the working example.

https://jsfiddle.net/srfpw785/

answered Nov 15, 2019 at 15:54

Furqan Ansari

1508 bronze badges

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

1 Comment

Daniel You Over a year ago

Thank you Furqan, this fixed my issue.

Marin Terziyski · Accepted Answer · 2019-11-15 15:35:59Z

I think you should insert your logic inside mounted() , not in created() , this should fix your problem with rendering.

<template>
  <div>
    <h1>Weather</h1>
    {{ weather }} 
  </div>
</template>

<script>
export default {
  name: 'Weather',

data() {
    return {
      weather : {},
    }

  },
  mounted() {
      this.getWeather()
  },

  methods: {
    async getWeather() {
      let self = this;
          try {
            const response = await fetch('https://api.weatherbit.io/v2.0/current?city=Berlin&country=DE&key=dcbea1b771ab41f09cd6b138d8cd50c2');
            const myJson = await response.json();
            self.weather.temp = myJson.data[0].temp;
            self.weather.sensation = myJson.data[0].app_temp;
            self.weather.description = myJson.data[0].weather.description;
        } catch (error) {
            console.error(error);
        }
    }

</script>

These are the steps in Vue lifecycle :

beforCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

Hope this will help you to understand Vue lifecycle :)

Nice, Marin I was about to answer this for Daniel, but Also I'd suggest some refactor on this code for better maintainability, since he inside getWeather is bloated :(
I would also suggest putting a v-if or v-show around {{ weather }} to ensure it only shows when the data is populated.
Data is still not being re-rendered after switching it to mounted, Thank you for your nice suggestions, definitely will refactor it. Assigning the response value directly was what solved my issue. like: self.weather = myJson.data[0].temp;

Collectives™ on Stack Overflow

Update DOM after fetching from API in VueJS

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related