我是 VueJS 的初学者,希望得到您的帮助。
我正在尝试基于 OpenWeatherMap API 创建天气预报应用程序。
这个概念是这样的:
Search.vue)Weather.vue)我创建了具有两个一致的提取调用的函数。首先获取输入的输入 query 并从 Current Weather Data API 返回所需的数据。之后,函数运行第二次获取到 One 根据第一次获取的 。latitude longitude 调用 API
一切正常并且显示良好,但我不明白为什么我有一个错误 Uncaught (in Promise) TypeError: Cannot readproperties of undefined (reading '1') in console:
有人知道如何修复此错误吗?
我的Search.vue(主页)组件:
我的Weather.vue(天气结果显示页面)组件:
{{ weather.clouds.all }}%
{{ weather.main.humidity }}%
{{ Math.round(weather.main.temp) }}
°C
{{ Math.round(weather.main.temp_max) }}°
{{ Math.round(weather.main.temp_min) }}°
{{ weather.weather[0].description }}
Feels like: {{ Math.round(weather.main.feels_like) }}°C
Sunrise: {{ weather.sys.sunrise }}
Sunset: {{ weather.sys.sunset }}
{{ forecast.daily[day].dt }}
{{ Math.round(forecast.daily[day].temp.day) }}°C
Back to search
我的 router/index.js 文件:
import { createRouter, createWebHashHistory } from 'vue-router'
import Search from '../components/Search.vue'
import Weather from '../components/Weather.vue'
const routes = [
{
path: '/',
name: 'Search',
component: Search
},
{
path: '/detailed-weather',
name: 'DetailedWeather',
component: Weather,
props: true
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
根据我的猜测(给出代码和错误),您从 API 接收的对象可能存在问题。
错误消息表明您正在尝试从数组中未定义的特定索引处读取某些内容。
代码中唯一可能导致此错误的情况是来自您正在阅读的模板,例如:
{{ forecast.daily[day].dt }} {{ Math.round(forecast.daily[day].temp.day) }}我无法准确分辨出它是哪一个,但请尝试仔细检查您正在使用的对象的形状。