asyncData
からのデータを head
で使っています。
ローカル環境では表示されますが、本番環境になるとAPIの読み込みがされず、ブラウザにAPIの情報が表示されません。
APIの呼び出しをmounted内に書いたら表示はされましたが、代わりにOGPが表示されなくなりました...
拙い説明ですいません。どうかよろしくお願いします。
エラーメッセージ
TypeError: Cannot read property 'title' of undefined```
該当のソースコード
<div class="contents-header">
<h1>{{posts.title}}</h1>
</div>
export default {
data(){
return {
}
},
head(){
return{
title: this.posts.title,
meta:[
{ hid: 'title', name: 'title', content: this.posts.title }
]
}
},
async asyncData({app,params,error}) {
const {id} = params;
const response = await axios.get(`https://hogehoge.com/api/v1/posts/${id}`)
.catch(err=> {
error({
statusCode: err.response.status,
message: err.response.data.message,
});
return err.response;
});
const posts = JSON.parse(response.data)
return {posts};
}
}