Как получить данные с отношениями один к одному, используя laravel + VueJS

Question

Как я могу показать имя пользователя, используя внешний ключ?У меня есть 2 таблицы: пользователи и департаменты, один департамент имеет только одного шефа, а пользователь может быть шеф-поваром только одного департамента.Так что я думаю, что это «отношения один к одному».таблица отгрузки имеет "user_id" в качестве внешнего ключа от пользователей таблицы.В VUE у меня есть:

<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>

Я хочу, чтобы отобразить имя пользователя из таблицы пользователей, который имеет user_id.Спасибо.

---

Не работает Контролер отдела:

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

Я прав?

Answer 1

1. Сделайте запрос на получение пользователей

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
  })
}

В вашем шаблоне

<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>

Answer 2

Сначала нужно определить отношения ..

Модальный отдел

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

Теперь получить данные с загруженным отделом.

Функция контроллера

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

Теперь вы можете получить доступ к определенному Cheif объекту в department объекте.

In Vue

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