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

Question

我正在使用 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 部分并将其替换为

{{weather}}

然后添加回 v-for 代码时，我可以看到它正确显示，但只要正确刷新页面一切都消失并变成空白。

Answer 1

因为你的

weather

函数中确实没有

created

变量。检查您的代码片段：

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

您试图将

weather

作为参数传递给

console.log

，我认为您可以做的是：

const weather = response.data;
console.log(weather)

或

console.log(this.weather);