VueJSライフサイクルフックでデータを設定する方法

Question

createdライフサイクルフックを使用して、コンポーネントのデータプロパティを設定しようとしています。以下は私の単一ファイルコンポーネントです。私は現在、このコードを実行しているときにコンソールに"TypeError: Cannot read property 'summary' of undefined"が表示されています。これはテンプレートがcreatedからの移入オブジェクトではなく、dataプロパティで宣言された空のオブジェクトとしてforecastDataで動作していることを示しています。 dataプロパティを完全に削除すると、TypeError: Cannot read property 'currently' of undefinedが表示されます。明らかに、私はここで何か基本的なものを欠いている。

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

Answer 1

オブジェクトを最初にマウントしたときにデータが存在しないように、データを非同期に設定しています。 forecastData.currently.summaryにアクセスしようとすると、currentlyプロパティが定義されていないため、エラーが発生します。

エラーを回避するためにv-ifを使用してください。

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

また、初期化でnullサマリーを定義してください。

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