Vue CLI调用OpenWeatherMap API报reading '1'类型错误如何修复

错误原因 #

• 报错源于渲染时序不匹配：你外层模板的渲染判断条件仅校验了当前天气数据weather加载完成，此时预报接口请求尚未返回，forecast初始为空对象，访问forecast.daily返回undefined，循环中执行forecast.daily[day]相当于读取undefined[1]，就触发了该报错。

修复步骤 #

1、修改Weather.vue模板外层的渲染条件，同时校验预报数据加载完成：

<!-- 原代码 -->
<div class="row" v-if="typeof weather.main != 'undefined'">

<!-- 修改后代码 -->
<div class="row" v-if="weather.main && forecast.daily">

2、（可选优化）调整forecast的初始值，从根源避免属性读取异常：
找到Weather.vue的data配置项，修改forecast初始值：

// 原代码
forecast: {}

// 修改后代码
forecast: {
  daily: []
}

内容的提问来源于stack exchange，提问作者Ioann Sulyma