

`asyncData` からのデータを `head` で使っています。  
ローカル環境では表示されますが、本番環境になるとAPIの読み込みがされず、ブラウザにAPIの情報が表示されません。

APIの呼び出しをmounted内に書いたら表示はされましたが、代わりにOGPが表示されなくなりました...  
拙い説明ですいません。どうかよろしくお願いします。

* * *

**エラーメッセージ**

[code]

    TypeError: Cannot read property 'title' of undefined```  
    
[/code]

**該当のソースコード**

[code]

    <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};  
      }
    }
    
[/code]


CC BY-SA 4.0
2020-01-30T08:04:22.653
62661
2020-01-30T15:01:55.520
2020-01-30T15:01:55.520
19110
27726
question
vue.js nuxt.js
Nuxtで作ったサイトが表示されない