How to fetch data with relationship using VueJs + Laravel

Question

How can I show the user name in my table using vuejs ?

I have my users and posts table with the relationships set. A user has many posts and a post belongs to a user.

In my Posts.vue template I can now show the post table data:

<tr v-for="post in posts">
    <td>{{ post.id }}</td>
    <td>{{ post.title }}</td>
    <td>{{ post.body | snippet }}</td>
</tr>

A script looks like this:

<script>
    export default {
        data(){
            return{
                posts: []
            }
        },

        methods: {
            showPosts(){
                axios.get('/app/posts').then(response => {
                    this.posts = response.data.posts;
                });
            }
        },
       mounted(){
            this.showPosts();
       }
    }
</script>

My PostController looks like this in the index function

 public function index()
 {
    //
    $posts = Post::all();
    return response()->json([
        'posts' => $posts,
    ], 200);
 }

Since I have the user_id in the posts table, How can I show the user name in my table using vuejs ?

Sidney Sousa · Accepted Answer · 2018-04-19 21:56:36Z

25

So I found from Laravel docummentation that I could pass the "with" function in my controller like this:

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

That gives me the posts and the user data of that post as well which allows me to access like this:

{{ post.user.name }}

answered Apr 19, 2018 at 21:56

Sidney Sousa

3,64411 gold badges54 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bariq Dharmawan Over a year ago

For the record, if your relation function name using cameCase such as getUser your relation column between post and user in API response would be get_user instead of getUser. I just consider this today

Ayeni Anthony · Accepted Answer · 2018-11-14 14:50:07Z

Thanks for documenting this, it sure helps.

I was doing a relational linking in laravel, not ready with the api yet but with the with() method, referencing the relational data was a breeze in my vuejs code.

Not Working: Laravel

public function index()
{
  if (request()->q){
    $search = request()->q;

    $searches =  User::whereHas('doctor') 
      ->where(function ($query) use ($search){
        $query->where('name', 'like', "%$search%")
              ->orWhere('email', 'like', "%$search%");
      })->paginate(5);
  }

  return $searches;
}

Working: Laravel

public function index()
{
  if (request()->q){
    $search = request()->q;

    $searches =  User::with('doctor')->whereHas('doctor') 
      ->where(function ($query) use ($search){
        $query->where('name', 'like', "%$search%")
              ->orWhere('email', 'like', "%$search%");
      })->paginate(5);
  }
  return $searches;
}

Usage: VueJs

... <span v-text="search.doctor.specialty"></span>

Murad · Accepted Answer · 2020-07-08 16:59:23Z

1

To access the laravel relationships in VUE component Laravel Eager loading works well. Use with() Method. for example,

public function recent_orders() {

     $orders = Order::with('service')->where('user_id', Auth::User()->id)->get();

     return response()->json($orders);
}

Now to access the relationship we can write,

<p>{{ order.service.name }}</p>

answered Jul 8, 2020 at 16:59

Murad

1,19019 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to fetch data with relationship using VueJs + Laravel

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related