Adding client column in table

This tutorial is part of this mini project on Laravel vue spa. To see all the sections of this project click here

Step 01: Modifying toArray() method inside IssueResource.php adding client field for the api endpoint response

public function toArray(Request $request): array
{
    return [
        'id' => $this->id,
        'title' => $this->title,
        'client' => $this->client->name,
        'description' => substr($this->description, 0, 80) . '...',
        'created_at' => $this->created_at->toDateString()
    ];
}

Step 02: Modifying index() method of IssueController.php with eagerloading method

public function index() {
    $issues = Issue::with('client')->paginate(10);
    return IssueResource::collection($issues);
}

Step 03: Now modifying table section inside Index.vue like below adding client column inside issues table

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th>ID</th>
      <th>Client</th>
      <th>Title</th>
      <th>Description</th>
      <th>Created</th>
    </tr>
  </thead>
  <tbody>
      <tr v-for="issue in issues.data">
          <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
              {{ issue.id }}
          </td>
          <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
              {{ issue.client }}
          </td>
          <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
              {{ issue.title }}
          </td>
          <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
              {{ issue.description }}
          </td>
          <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
              {{ issue.created_at }}
          </td>
      </tr>
  </tbody>
</table>