代码之家 › 专栏 › 技术社区 › Rhys Swansbra

API响应未在页面中呈现:在Proxy.created未定义天气

v-for axios vue.js node.js

Rhys Swansbra · 技术社区 · 1 周前

我使用AXIOS从API获取天气数据,并将其动态显示在我的Vue页面中。API请求成功,我可以在页面上呈现它,但当我尝试使用v-for显示数据时,整个页面变为空白,我在web控制台中得到错误:天气没有在Proxy.created中定义。

以下组件:

<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数据

{
    "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
        ]
    }
}

我觉得这很奇怪,因为当我删除v-for部分并将其替换为

天气

然后添加回v-for代码,但只要正确刷新页面,它就会全部消失并变为空白。

1 回复 | 直到 1 周前

Jojo Narte 1 周前

因为真的没有 weather 您内部的变量 created 作用检查您的代码片段:

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

你试图通过 天气 进入 console.log 作为论据,我认为你能做的是:

console.log(this.weather);

既然你提到你的模板代码正在工作,我假设你指向了未定义的错误,这是由我上面提到的引起的。

如果你想缓存数据,有多种方法可以做到这一点,这样你就不必每次刷新都发出请求,或者你只需更改代码,这样每次刷新时它也会再次获取数据。