Laravel

Laravel×Vueでリレーションが上手く表示できないときの対処方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Laravel 記事の目次はこちら

Laravel × Vue でリレーションが上手く表示できないときの対処方法について書きました。

Laravel Framework 8.83.8
Vue 2.6

間違っている例(Vue の表示の書き方)

<div v-for="post in posts">
  <div>{{post.postCategory}}</div>
</div>

正しい例(Vue の表示の書き方)

<div v-for="post in posts">
  <div>{{post.post_category}}</div>
</div>

解説

Laravel でキャメルケースで関数を書いたリレーションはスネークケースになって Vue 側に返されているため、そこを勘違いしている可能性があります。

console.log を使ってデータの中身をよく確認することで、このようなバグは防ぐことが可能です。

Laravel のモデルに書いたリレーション

public function postCategory()
{
  return $this->hasOne('~~~');
}

Laravel のコントローラーで with で取得

$posts = Post::with('postCategory')->get();
return $posts;

Vue でレスポンスを見ると・・・

リレーションがスネークケース

<div v-for="post in posts">
  <div>{{post.post_category}}</div>
</div>

に変わっていることが分かります。

axios で get しているレスポンスを console で中身を確認してみてください。

axios
  .get("api/~~")
  .then(({ data }) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

まとめ

以上です。

誰かの参考になればと思います。

感想・苦情は TwitterDM にご連絡ください。

それでは!

人気記事

PHP7.4 + Laravel6 のプロジェクトを AWS EC2 にデプロイする

【laravel-breadcrumbs】Laravel でパンくずリストを実装する