API response not rendering in page: weather is not defined at Proxy.created

Question

I am using AXIOS to get weather data from an API and dynamically display that in my Vue page. The API request gets successfully and I can render that on the page but when I try to use v-for to display the data, the entire page goes blank and I get the error in the web console: weather is not defined at Proxy.created.

component below:

<script>
import axios from 'axios'

export default{
  data() {
    return {
      weather: []
    };
  },
  async created(){
    try{
      const response = await axios.get('apilinkredacted');
      this.weather = response.data;
      console.log(weather)
    } catch (error) {
      console.error(error);
    }
  }
}
</script>

<template>
  <main>
    <div v-for="n in 4" class="text-cliPurple border-t border-windowOutline pb-2 pl-2">
      <p class="underline">{{ weather.daily.time[n-1] }} </p>

    <div class="grid grid-cols-2">
      <div class="">
        <pre>
     \   /
      .-.
   ― (   ) ―
      `-’
     /   \
        </pre>
      </div>
      <div class="text-left">
        <p><span class="text-cliOrange">Temp:</span> {{ weather.daily.temperature_2m_max[n-1] }} C</p>
        <p><span class="text-titleColor">Rain Chance:</span> {{ weather.daily.precipitation_probability_max[n-1] }}%</p>
        <p><span class="text-userColor">Rain Amount:</span> {{ weather.daily.rain_sum[n-1] }}mm</p>
        <p><span class="text-cliRed">UV:</span> {{ weather.daily.uv_index_max[n-1] }}</p>

      </div>
    </div>
  </div>
  </main>
</template>

JSON data

{
    "latitude": -35.25,
    "longitude": 149.125,
    "generationtime_ms": 0.0940561294555664,
    "utc_offset_seconds": 36000,
    "timezone": "Australia/Sydney",
    "timezone_abbreviation": "AEST",
    "elevation": 568,
    "daily_units": {
        "time": "iso8601",
        "temperature_2m_max": "°C",
        "apparent_temperature_max": "°C",
        "uv_index_max": "",
        "rain_sum": "mm",
        "precipitation_probability_max": "%"
    },
    "daily": {
        "time": [
            "2024-05-09",
            "2024-05-10",
            "2024-05-11",
            "2024-05-12",
            "2024-05-13",
            "2024-05-14",
            "2024-05-15"
        ],
        "temperature_2m_max": [
            16.5,
            14.9,
            13.1,
            13.4,
            17.5,
            15.9,
            14.7
        ],
        "apparent_temperature_max": [
            14.4,
            13.2,
            11.4,
            11.1,
            16,
            14.6,
            13.8
        ],
        "uv_index_max": [
            1.95,
            2.55,
            0.6,
            3.9,
            4.2,
            3.95,
            3.65
        ],
        "rain_sum": [
            0,
            5.1,
            26.5,
            3.7,
            0,
            0,
            0
        ],
        "precipitation_probability_max": [
            52,
            74,
            90,
            37,
            0,
            0,
            3
        ]
    }
}

I find it odd because I can see it displaying correctly when I remove the v-for section and replace it with just

{{weather}}

and then adding back the v-for code but as soon as properly refresh the page it all disappears and goes blank.

Answer 1

Because there is really no weather variable inside your created function. Check this snippet of your code:

async created(){
    try{
      const response = await axios.get('apilinkredacted');
      this.weather = response.data;
      console.log(weather)
    } catch (error) {
      console.error(error);
    }
  }

You were trying to pass weather into console.log as argument, I think what you can do is:

console.log(this.weather);

Since you mentioned your template code was working, I'm assuming your pointing into the undefined error, which was caused by what I mentioned above.

If you are looking to make your data cached there are multiple ways you can do it so that you don't have to make the request every time you refresh, or you can just change the code so that every time you refresh it also fetches the data again.