laravel api с vue 2 js не возвращает данные - может 'localhost: 8000' (или '127.0.0.1:8000') быть проблемой?

Question

Я использую repo https://github.com/mschwarzmueller/laravel-ng2-vue/tree/03-vue-frontend, поэтому у меня есть 100% -ная уверенность в надежности кода. Я могу опубликовать через точку доступа laravel api через очень простой клиент Vue, а также через Postman. Через Postman я могу получить массив данных таблицы, но не так в клиентском приложении. В ПОСТМАН:

localhost:8000/api/quotes 

работает просто отлично.

В вю 2 Js КЛИЕНТА APP:

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

возвращает ничего. возвращая ответ на Console.log, ничего не возвращает. На вкладке «Сеть/XHR» отображаются строки данных таблицы, но я не уверен, что это означает.

Я точно знаю, что этот код работает для других с их уникальными конечными точками api, которые, как я полагаю, могут не использовать localhost или «127: 0.0.1: 1080».

Edit: в ответ на запрос для получения дополнительной информации

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

и соответствующего маршрута:

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

Просто, чтобы подтвердить: я использую код уточнен GitHub репо, в котором только изменение мой api endpoint адреса, упомянутые в первой строке тела этого вопроса. , Обратите внимание, что конец Laravel также получен из связанного репо в тонком учебнике Max. Прогон кода можно увидеть на

Так что я действительно не думаю, что это ошибка кодирования, но это ошибка конфигурации из-за меня с помощью локального хоста?

EDIT: Это была ошибка кодирования в контроллере Laravel, как показано ниже

Answer 1

Причина ваш код не работает, если так как вы не указали ключ для $quotes в контроллере но вы ищите его в файле vue (response.data.quotes).

[$quotes] по существу [0 => $quotes] так, когда ответ приходит через JSON это будет 0: [...] не quotes: [...].

Чтобы получить эту работу, вам просто нужно изменить:

$response = [$quotes]; 

к:

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

---

Кроме того, просто FYI, вам не нужно, чтобы обеспечить 200 в response->json(), поскольку он по умолчанию, и вы можете просто вернуть массив, и Laravel автоматически вернет правильный ответ json, например:

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

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

Очевидно, что вам не обязательно, если вы этого не хотите.

Надеюсь, это поможет!