How to Display Related Data in Laravel Vue
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
⇨ Table of Contents for Laravel Articles
This article explains how to display related data in Laravel Vue.
Introduction
In Laravel, when you define a relationship in your model using camel case, like postCategory, it will be sent in snake case, post_category, on the Vue side. It's important to be aware of this.
By using console.log to carefully check the contents of the response data, you can prevent such bugs.
How to Display Related Data
Define the Relationship in Laravel Model
In app/Models/Post.php:
public function postCategory()
{
return $this->hasOne(Category::class);
}Use with in Laravel Controller to Retrieve Data
public function index()
{
$posts = Post::with('postCategory')->get();
return $posts;
}Make API Request on the Vue Side
This assumes that the categories table has a column named 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 // Set response data to posts
})
.catch(err => {
console.log(err)
})
})
</script>When you check the output of console.log(data), it looks like this:
{
"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."
}As you can see, it uses post_category in snake case.
For Vue 2
<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: [], // Define posts as a data property
}
},
mounted() {
axios
.get("api/posts")
.then(response => {
console.log(response.data)
this.posts = response.data // Set response data to posts
})
.catch(err => {
console.log(err)
})
},
}
</script>Key Points
Correct Example
<div v-for="post in posts">
<div>{{ post.post_category.name }}</div>
</div>Incorrect Example
If you write it like this, it will result in an error.
<div v-for="post in posts">
<div>{{ post.postCategory.name }}</div>
</div>Error Message:
TypeError: Cannot read properties of null (reading 'name')
This error occurs when you try to access properties of null or undefined.
Conclusion
This was how to display related data in Laravel Vue.
If you're unsure about how to define relationships in Laravel, please refer to the following articles:
⇨ How to Create One-to-One Relationships in Laravel (hasOne)
⇨ How to Create One-to-Many Relationships in Laravel and Save, Display Data (hasMany)
⇨ How to Create Many-to-Many Relationships in Laravel and Save, Display Data (belongsToMany)
