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

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

オススメ本

Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう！！

読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

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

Laravel Framework 8.83.8
Vue 2.6

間違っている例（Vue の表示の書き方）

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

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

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

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

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

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

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

<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 にご連絡ください。

それでは！