laravel api mit vue 2 js gibt keine Daten zurück - könnte 'localhost: 8000' (oder '127.0.0.1:8000') das Problem sein?

Question

Ich benutze das Repo https://github.com/mschwarzmueller/laravel-ng2-vue/tree/03-vue-frontend so habe ich 100% Vertrauen in die Zuverlässigkeit des Codes. Ich kann den Laravel-API-Endpunkt über den sehr einfachen Vue-Client und auch über Postman veröffentlichen. Über Postman kann ich das Tabellendaten-Array abrufen, nicht aber in der Client-App. In POSTMAN:

localhost:8000/api/quotes 

funktioniert gut.

IM vue 2 js CLIENT APP:

methods: { 
     onGetQuotes() { 
      axios.get('http://localhost:8000/api/quotes') 
       .then(
        response => { 
         this.quotes = (response.data.quotes); 
        }  
       ) 
       .catch(
        error => console.log(error) 
       ); 
     } 

kehrt nichts. Wenn Sie die Antwort an Console.log zurücksenden, wird nichts zurückgegeben. Die Registerkarte Netzwerk/XHR zeigt die Tabellendatenzeilen an, aber ich bin mir nicht sicher, was das bedeutet.

Ich weiß sicher, dass dieser Code für andere mit ihren eindeutigen API-Endpunkten funktioniert, von denen ich anmaße, dass sie localhost oder '127: 0.0.1: 1080 nicht verwenden können.

Edit: als Antwort für weitere Informationen anfordern

public function getQuotes() 
{ 
    $quotes = Quote::all(); 
    $response = [$quotes]; 
    return response()->json($response, 200); 
} 

und der entsprechenden Route:

Route::get('/quotes', [ 
    'uses' => 'QuoteController@getQuotes' 
]); 

nur zu bestätigen: Ich verwende, in dem überprüft GitHub Repo-Code die einzige Änderung ist mein api Endpunktadressen, die in der ersten Zeile des Hauptteils dieser Frage erwähnt sind. . Beachten Sie, dass das Laravel-Back-End ebenfalls von einem verwandten Repo in Max 'feinem Tutorial abgeleitet ist. Der laufende Code ist zu sehen unter

Also ich glaube wirklich nicht, dass dies ein Coding-Fehler ist - aber ist es ein Konfigurationsfehler wegen mir mit lokalen Host?

EDIT: Es war ein Codierungsfehler im Laravel Controller wie unten

Answer 1

gezeigt Der Grund des Code nicht, wenn zu arbeiten, weil Sie haben keinen Schlüssel für Ihre $quotes in Ihrem Controller aber Sie‘ Suchen Sie danach in Ihrer Vue-Datei (response.data.quotes).

[$quotes] ist im Wesentlichen [0 => $quotes] so, wenn die json Reaktion durch 0: [...] nicht quotes: [...] sein kommt.

Um dies zu erhalten, arbeiten müssen, nur ändern:

$response = [$quotes]; 

zu:

$response = ['quotes' => $quotes]; 

---

Weiterhin nur FYI ein, die Sie nicht liefern müssen, um die 200 in wie es ist der Standard und Sie können einfach ein Array zurückgeben und Laravel automatisch die richtige Antwort JSON z. B .:

public function getQuotes() 
{ 
    $quotes = \App\Models\Artist::all(); 

    return compact('quotes'); //<-- This is just another way of writting ['quotes' => $quotes] 
} 

Offensichtlich müssen Sie nicht, wenn Sie nicht wollen.

Hoffe, das hilft!