Laravel
Laravel Vue でリレーション先のデータを表示する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
PR
Laravel Vue でリレーション先のデータを表示する方法について書きました。
さいしょに
Laravel のモデルにキャメルケースでpostCategoryと関数名を書いたリレーションは、Vue 側ではスネークケースpost_categoryになって送られているため、注意が必要です。
console.log を使って、レスポンスのデータの中身をよく確認することで、このようなバグは防ぐことが可能です。
リレーション先のデータを表示する方法
Laravel のモデルにリレーションを書く
app/Models/Post.php
public function postCategory()
{
return $this->hasOne(Category::class);
}Laravel のコントローラーで with を使って取得する
public function index()
{
$posts = Post::with('postCategory')->get();
return $posts;
}Vue 側で API にリクエストする
categoriesテーブルには、nameというカラムが存在する前提で書いています。
<template>
<div v-for="post in posts" :key="post.id">
<div>{{ post.post_category.name }}</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import axios from "axios"
const posts = ref([])
onMounted(() => {
axios
.get("api/posts")
.then(({ data }) => {
console.log(data)
posts.value = data // レスポンスデータをpostsにセット
})
.catch(err => {
console.log(err)
})
})
</script>console.log(data)の出力結果を見ると、
{
"id": 1,
"post_category": {
"name": "Technology"
},
"title": "Understanding Vue.js",
"content": "This is a post about Vue.js."
},
{
"id": 2,
"post_category": {
"name": "Health"
},
"title": "Benefits of Meditation",
"content": "Meditation helps in mental well-being."
}このようにpost_categoryとスネークケースになっていることが分かります。
Vue2 の場合
<template>
<div v-for="post in posts" :key="post.id">
<div>{{ post.post_category.name }}</div>
</div>
</template>
<script>
import axios from "axios"
export default {
data() {
return {
posts: [], // postsをデータプロパティとして定義
}
},
mounted() {
axios
.get("api/posts")
.then(response => {
console.log(response.data)
this.posts = response.data // レスポンスデータをpostsにセット
})
.catch(err => {
console.log(err)
})
},
}
</script>要点だけ
正しい例
<div v-for="post in posts">
<div>{{post.post_category.name}}</div>
</div>間違っている例
このように書くとエラーになります。
<div v-for="post in posts">
<div>{{post.postCategory.name}}</div>
</div>【エラー文】
TypeError: Cannot read properties of null (reading 'name')
NULL や Undefined に対してプロパティ指定したら、このエラーが出ます。
まとめ
以上、Laravel Vue でリレーション先のデータを表示する方法でした。
Laravel のリレーションの書き方が分からない場合は、以下の記事をごらんください。
⇨Laravel で１対１のリレーションをする方法。【hasOne】
フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。
