1

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};  
  }
}
4
  • 申し訳ございませんでした。もう一度編集いたしました。動作も確認済みです。
    – Piesuke
    Commented 2020年1月30日 11:43
  • 回答される方へ teratail.com/questions/238505
    – hinaloe
    Commented 2020年1月30日 23:34
  • apiのレスポンスを共有していただけますか? Commented 2020年7月3日 2:33
  • api のレスポンスが間違っているときに何が起こるかも考慮していませんでした。 Commented 2020年7月3日 2:34

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。