Laravel
Laravel×Vueでリレーションが上手く表示できないときの対処方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
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 にご連絡ください。
それでは！
人気記事
