Как сделать таблицу-сетку, содержащую связи между работниками и их отделами, используя связи Laravel и vue

Question

В laravel есть две сущности - отделы и сотрудники, они связаны связью многие ко многим. Во vue я получаю два объекта (но в принципе могу получить и связать что угодно):

Cотрудники:

  {
    "id": 11,
    "name": "Юль",
    "surname": "Кутаева",
    "middle_name": "Лукашенко",
    "gender": "Ж",
    "salary": "50",
    "created_at": "2021-10-11T18:43:40.000000Z",
    "updated_at": "2021-10-11T19:16:21.000000Z",
    "departments": [
      {
        "id": 8,
        "name": "Кухарки",
        "created_at": "2021-10-11T18:14:49.000000Z",
        "updated_at": "2021-10-11T18:53:46.000000Z",
        "pivot": {
          "employee_id": 11,
          "department_id": 8
        }
      },
      {
        "id": 9,
        "name": "Коты",
        "created_at": "2021-10-11T18:53:37.000000Z",
        "updated_at": "2021-10-11T18:53:37.000000Z",
        "pivot": {
          "employee_id": 11,
          "department_id": 9
        }
      }
    ]
  },
  {
    "id": 14,
    "name": "sdcsdc",
    "surname": "sdcsdc",
    "middle_name": "sdcsdc",
    "gender": "sc",
    "salary": "sdc",
    "created_at": "2021-10-11T19:52:41.000000Z",
    "updated_at": "2021-10-11T19:52:41.000000Z",
    "departments": [
      {
        "id": 8,
        "name": "Кухарки",
        "created_at": "2021-10-11T18:14:49.000000Z",
        "updated_at": "2021-10-11T18:53:46.000000Z",
        "pivot": {
          "employee_id": 14,
          "department_id": 8
        }
      }
    ]
  }
]```

Отделы:
```[
  {
    "id": 8,
    "name": "Кухарки",
    "created_at": "2021-10-11T18:14:49.000000Z",
    "updated_at": "2021-10-11T18:53:46.000000Z",
    "employees": [
      {
        "id": 11,
        "name": "Юль",
        "surname": "Кутаева",
        "middle_name": "Лукашенко",
        "gender": "Ж",
        "salary": "50",
        "created_at": "2021-10-11T18:43:40.000000Z",
        "updated_at": "2021-10-11T19:16:21.000000Z",
        "pivot": {
          "department_id": 8,
          "employee_id": 11
        }
      },
      {
        "id": 14,
        "name": "sdcsdc",
        "surname": "sdcsdc",
        "middle_name": "sdcsdc",
        "gender": "sc",
        "salary": "sdc",
        "created_at": "2021-10-11T19:52:41.000000Z",
        "updated_at": "2021-10-11T19:52:41.000000Z",
        "pivot": {
          "department_id": 8,
          "employee_id": 14
        }
      }
    ]
  },
  {
    "id": 9,
    "name": "Коты",
    "created_at": "2021-10-11T18:53:37.000000Z",
    "updated_at": "2021-10-11T18:53:37.000000Z",
    "employees": [
      {
        "id": 11,
        "name": "Юль",
        "surname": "Кутаева",
        "middle_name": "Лукашенко",
        "gender": "Ж",
        "salary": "50",
        "created_at": "2021-10-11T18:43:40.000000Z",
        "updated_at": "2021-10-11T19:16:21.000000Z",
        "pivot": {
          "department_id": 9,
          "employee_id": 11
        }
      }
    ]
  }
]```

Нужно как то сделать на фронте таблицу, где колонками будут являются отделы, а строками - сотрудники.
Ячейка находящаяся на пересечении работника и отдела в котором он работает должна содержать соответствующую отметку, остальные колонки можно оставить пустыми.

Answer 1

const app = new Vue({
  el: "#app",
  data() {
    return {
      employes: [{
          "id": 11,
          "name": "Юль",
          "surname": "Кутаева",
          "middle_name": "Лукашенко",
          departments_id: [8, 9]
        },
        {
          "id": 14,
          "name": "sdcsdc",
          "surname": "sdcsdc",
          "middle_name": "sdcsdc",
          departments_id: [8]

        }
      ],
      departments: [{
          "id": 8,
          "name": "Кухарки",
        },
        {
          "id": 9,
          "name": "Коты",
        }
      ]
    };
  },
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>


<div id="app">
  <table cellspacing="10">
    <thead>
      <tr>
        <th>Name</th>
        <th v-for="dep in departments">{{dep.name}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in employes">
        <td>{{`${item.name} ${item.middle_name} ${item.surname}`}}</td>
        <td v-for="dep in departments" :bgcolor="item.departments_id.includes(dep.id) ? 'red' : ''"></td>
      </tr>
    </tbody>
  </table>
</div>

БЛОГ НА HUSL

Как сделать таблицу-сетку, содержащую связи между работниками и их отделами, используя связи Laravel и vue

Ответы (1 шт):