如何在VueJS生命周期钩子内设置数据

我正在尝试使用created生命周期挂钩在我的组件上设置数据属性。以下是我的单文件组件。运行此代码时，我正在控制台中看到"TypeError: Cannot read property 'summary' of undefined"。这告诉我该模板正在使用forecastData作为data属性中声明的空对象，而不是来自created的已填充对象。当我完全删除data财产时，我看到TypeError: Cannot read property 'currently' of undefined。显然，我在这里错过了一些基本的东西。如何在VueJS生命周期钩子内设置数据

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

来源

2017-05-14 MattDionis

您正在异步设置数据，因此在第一次安装对象时它不存在。当您尝试访问forecastData.currently.summary时，currently属性未定义，导致您的错误。使用v-if来避免错误。

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

或者，在您的初始化中定义空值汇总。

data() { 
    return { 
    forecastData: { 
     summary: null 
    } 
    } 
},

来源

2017-05-14 19:24:13 Bert

谢谢！已更新为'forecastData：{currently：{summary：null}}'，它可以工作。这是在创建组件时异步获取和设置数据的正确方法吗？ – MattDionis

@MattDionis你正在做的事情非常好，你只需要注意组件最初安装时可能不存在的嵌套属性。 – Bert

如何在VueJS生命周期钩子内设置数据

回答

相关问题