Wyświetlenie nazw wszystkich klientów

Cześć, uczę się używać axios i chcę wyświetlić wszystkie nazwy klientów. Używam Laravel 9 i Vue 3. To jest mój kod w komponencie List.vue. Mój problem polega na tym, że ten kod nic nie wyświetla. Ktoś mógłby mi pomóc, gdzie robię błąd? Rouer jest poprawny. To mój kontroler po stronie backendu i komponent List.vue
Kontroller ClientsController.php

public function index()
{
    $customers = $this->service->getList();
    $response = [
        'data' => $customers
    ];
    return response()->json($response);
}

Komponent List.vue

<template>
    <table>
        <tr>
            <th>Name</th>
        </tr>
        <tr>
            <td>{{ clients.name }}</td>
        </tr>
    </table>
    </template>

<script>
export default {
    name: "List",
    data() {
        return {
            clients: null
        }
    },
    mounted() {
        axios
            .get('/clients')
            .then(response => (
                this.clients = response.data.clients
            ))
    }
}
</script>

Mój problem polega na tym, że ten kod nic nie wyświetla

1. A w konsoli błędów w przeglądarce nie ma błędu?
2. co zwraca /clients jak wejdziesz w przeglądarce w to? czy wyświetlają ci się prawidłowe dane?

Zgaduje ale czy nie powinno byc response.data. ?

W przeglądrace pokazuje mi taki błąd caught (in promise) TypeError: Cannot read properties of null (reading 'name'). Nie wiem dlaczego on się pojawia

phpowiec napisał(a):

W przeglądrace pokazuje mi taki błąd caught (in promise) TypeError: Cannot read properties of null (reading 'name'). Nie wiem dlaczego on się pojawia

przypuszczam, że dlatego, że tak sam ustawiłeś jeśli masz w szablonie clients.name, a wartość inicjalizacyjna null.

phpowiec napisał(a):

W przeglądrace pokazuje mi taki błąd caught (in promise) TypeError: Cannot read properties of null (reading 'name'). Nie wiem dlaczego on się pojawia

Dlatego że w widoku próbujesz wyrenderować

<tr>
    <td>{{ clients.name }}</td>
</tr>

A na początku Twoja zmienna clients ma ustawioną wartość null:

 data() {
  return {
      clients: null
  }
},

Więc to jest to samo co jakbyś wpisał np:

 <tr>
    <td>{{ (null).name }}</td>
</tr>

Więc oczywiście że dostaniesz błąd:

TypeError: Cannot read properties of null (reading 'name')

Błąd Ci dokładnie powiedział co jest nie tak: Cannot read properties of null (reading 'name'): "Nie da się przeczytać właściwości z null (czytając name).

Cały problem polega na tym, że na początku ładujesz dane - więc ich nie ma, nie ma co wyświetlić. Możesz albo nie wyświetlić w ogóle <td>, wyświetlić coś zastępczego, albo coś jeszcze innego. Jedną z opcji byłoby:

<tr>
    <td v-if="clients">{{ clients.name }}</td>
    <td v-else>Ładowanie...</td>
</tr>