Javascript 如何在VueJS生命周期挂钩中设置数据

我正在尝试使用

创建的

生命周期挂钩在我的组件上设置数据属性。下面是我的单文件组件。我当前看到

“TypeError:运行此代码时无法在控制台中读取未定义的”

的属性“summary”。这说明模板使用的是

forecastData

作为

data

属性中声明的空对象，而不是创建的

中填充的对象。当我完全删除
数据
属性时，我看到
类型错误：无法读取未定义的
的“当前”属性。很明显，我缺少一些基本的东西

<template>
  <div>
    <p>
      <router-link to="/">Back to places</router-link>
    </p>
    <h2>{{forecastData.currently.summary}}</h2>
    <router-link :to="{ name: 'forecast' }">Forecast</router-link>
    <router-link :to="{ name: 'alerts' }">Alerts</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'CurrentWeather',
    data () {
      return {
        forecastData: {}
      }
    },
    created: function () {
      this.$http.get('/api/forecast/boston').then((response) => {
        this.forecastData = response.data;
      }, (err) => {
        console.log(err)
      });
    }
  }
</script>

<style scoped>
</style>



回到原地

{{forecastData.Current.summary}
预测
警报

导出默认值{
名称：'CurrentWeather'，
数据（）{
返回{
预报数据：{}
}
},
已创建：函数（）{
这是.http.get（'/api/forecast/boston'）。然后（（响应）=>{
this.forecastData=response.data；
}，（错误）=>{
console.log（错误）
});
}
}
您正在异步设置数据，以便在首次装入对象时数据不存在。尝试访问
forecastData.current.summary
时，
current
属性未定义，这将导致错误

使用
v-if
避免错误

<h2 v-if="forecastData.currently">{{forecastData.currently.summary}}</h2>

谢谢更新到
forecastData:{current:{summary:null}}
并且它可以工作。这是在创建组件时异步获取和设置数据的正确方法吗？@MattDionis您所做的一切都很好，您只需要注意组件最初装入时可能不存在的嵌套属性。
data () {
  return {
    forecastData: {
        summary: null
    }
  }
},