How to fetch data with one to one relationship using laravel+VueJS

Question

How can I show the name of user using a foreign key? I have 2 tables: users and departements, one departement have only one cheif and a user can be a cheif of only one departement. So I think it's a "one to one relationship". the departement table have the"user_id" as a foreign key from the table users. In the vue I have:

<tr v-for="departement in departements" :key="id" >
                <td>{{departement.id }}</td>
                <td>{{departement.name }}</td>
                <td>{{departement.user_id }}</td>
                <td>{{departement.bio }}</td>

I want to display the name of the user from users table who has the user_id. Thank you.

Dosen't work Department Controller:

public function index()
{
    return Departement::where('name','!=','admin')->latest()->paginate(100);
    $departements = Departement::with('chief')->get();
    return response()->ajax($departements, 200);
}

am i right?

Tharaka Dilshan · Accepted Answer · 2019-02-20 01:44:03Z

1

You need to define relationships first..

Department Modal

public function chief()
{
    return $this->belongsTo('App\User', 'user_id');
}

now fetch the data with eager loaded department.

Controller function

$departments = Department::with('cheif')->get();

Now you can access particular Cheif object in department object.

In Vue

<td>{{ department.cheif.name }}</td>

answered Feb 20, 2019 at 1:44

Tharaka Dilshan

4,4993 gold badges17 silver badges29 bronze badges

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

Comments

Miguel Coder · Accepted Answer · 2019-02-20 16:34:51Z

0

Do a get request to get the users

mounted () {
  axios.get('some/api/users')
  .then(res => {
    this.$set(this, 'users', this.users.reduce((accum, user) => accum[user.id] = user, {}))
    // transform the JSON to an object that maps to the user id
  })
}

In your template

<tr v-for="departement in departements" :key="id" >
                <td>{{departement.id }}</td>
                <td>{{departement.name }}</td>
                <td>{{departement.user_id }}</td>
                <td>{{departement.bio }}</td>
                <td>{{users[department.user_id].name}}</td>

edited Feb 20, 2019 at 16:34

answered Feb 20, 2019 at 2:30

Miguel Coder

1,95721 silver badges36 bronze badges

2 Comments

Hichem Neggaz Over a year ago

I got the data of the departments and the chief but it doesn't display . don't know why!

Hichem Neggaz Over a year ago

When i see the data in the console of the navigator I get the data of the department and the user who has the user_id but it has not display on the table

Collectives™ on Stack Overflow

How to fetch data with one to one relationship using laravel+VueJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related