Vue CLI - 類型錯誤：無法讀取未定義的屬性（讀取“1”）

Question

我是 VueJS 的初學者，希望得到您的幫助。

我正在嘗試基於 OpenWeatherMap API 建立天氣預報應用程式。

這個概念是這樣的：

1. 在主頁上輸入某個位置並點擊搜尋按鈕。 （在我的程式碼中，它是一個元件 Search.vue）
2. 重定向到另一個頁面並顯示結果 - 當前天氣和未來 6 天的天氣預報。 （組件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（首頁）元件：

<template>
    <div class="row">
        <div class="search-col col">
            <div class="search-box">
                <input 
                    type="text" 
                    class="search-bar" 
                    placeholder="Location" 
                    v-model="query">
                <router-link :to="{name: 'DetailedWeather', params: { query: query }}" class="btn-search">
                    <i class="fas fa-search"></i>
                </router-link>
            </div>
        </div>
    </div>
</template>

我的Weather.vue（天氣結果顯示頁面）元件：

<template>
    <div class="row" v-if="typeof weather.main != 'undefined'">
        <div class="weather-col col">
            <div class="weather-app">
                <div class="weather-box">
                    <div class="weather-top-info">
                        <div class="clouds-level"><span class="icon"><i class="fas fa-cloud"></i></span> {{ weather.clouds.all }}%</div>
                        <div class="humidity"><span class="icon"><i class="fas fa-tint"></i></span> {{ weather.main.humidity }}%</div>
                    </div>
                    <div class="weather-main-info">
                        <div class="temp-box">
                            <div class="temp-main">{{ Math.round(weather.main.temp) }}</div>
                            <div class="temp-inner-box">
                                <div class="temp-sign">°C</div>
                                <div class="temp-max"><span class="icon"><i class="fas fa-long-arrow-alt-up"></i></span> {{ Math.round(weather.main.temp_max) }}°</div>
                                <div class="temp-min"><span class="icon"><i class="fas fa-long-arrow-alt-down"></i></span> {{ Math.round(weather.main.temp_min) }}°</div>
                            </div>
                        </div>
                        <div class="weather-desc">{{ weather.weather[0].description }}</div>
                        <div class="weather-icon">
                            <img :src="'http://openweathermap.org/img/wn/'+ weather.weather[0].icon +'@4x.png'">  
                        </div>
                    </div>
                    <div class="weather-extra-info">
                        <div>Feels like: <span>{{ Math.round(weather.main.feels_like) }}°C</span></div>
                        <div>Sunrise: <span>{{ weather.sys.sunrise }}</span></div>
                        <div>Sunset: <span>{{ weather.sys.sunset }}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="forecast-col col">
            <div class="row">
                <div class="forecast-item-col col"  v-for="day in forecastDays" :key="day">
                    <div class="forecast-box">
                        <div class="forecast-date">{{ forecast.daily[day].dt }}</div>
                        <div class="forecast-temp">{{ Math.round(forecast.daily[day].temp.day) }}°C</div>
                        <div class="forecast-icon"><img :src="'http://openweathermap.org/img/wn/'+ forecast.daily[day].weather[0].icon +'@2x.png'"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="actions-col col">
            <router-link :to="{name: 'Search'}" class="btn btn-default">
                Back to search
            </router-link>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Weather',
        props: ['query'], //getting from homepage
        data() {
            return {
                api_key:'b7fe640e9a244244a6f806f3a6cbf5fc',
                url_base:'https://api.openweathermap.org/data/2.5/',
                forecastDays: 6,
                weather: {},
                forecast: {}
                
            }
        },
    methods: {
        fetchWeather(){
            // first call
            fetch(`${this.url_base}weather?q=${this.query}&units=metric&appid=${this.api_key}`)
            .then(response =>{ return response.json() }).then(this.setResults);
        },
        setResults(results){
          this.weather = results;

          // consistent second call
          fetch(`${this.url_base}onecall?lat=${results.coord.lat}&lon=${results.coord.lon}&exclude=current,minutely,hourly,alerts&units=metric&appid=${this.api_key}`)
          .then(data =>{ return data.json() }).then(this.setForecast);
        },
    
        setForecast(results){
            this.forecast = results
        },
    },
    created() {
        this.fetchWeather();
    }
</script>

我的 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

Answer 1

根據我的猜測（給出程式碼和錯誤），您從 API 接收的物件可能有問題。

錯誤訊息表示您正在嘗試從陣列中未定義的特定索引處讀取某些內容。

程式碼中唯一可能導致此錯誤的情況是來自您正在閱讀的模板，例如：

{{ forecast.daily[day].dt }}
{{ Math.round(forecast.daily[day].temp.day) }}

我無法準確分辨它是哪一個，但請嘗試仔細檢查您正在使用的物件的形狀。