コレクションをJSON形式でjavascriptに渡せない

Question

前提・実現したいこと

Eloquentで取り出したコレクションデータをJson形式に変換して、Javascript(vueコンポーネント)に渡したいです。

発生している問題・エラーメッセージ

response.dataがfalseになってしまいます。

//console.log(response)でコンソールに表示されるdata部分です。
data: false 

該当のソースコード

全てのプロジェクト情報を受け取りたいvueファイル

<template>
 〜省略〜
</template>

<script>
export default {
  data() {
    return {
      projects: [],
    }
  },
  mounted() {
    axios
      .get('/projectlist')
      .then((response) => {
        this.projects = response.data;
        console.log(response);  //こちらをコンソールに表示させています。
      });
}
</script>

JSON形式で全プロジェクト情報を返したいコントローラ

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Project;

use GuzzleHttp\Client;
use GuzzleHttp\Exception\ClientException;

use function GuzzleHttp\json_decode;

class HomeController extends Controller
{
  public function getProjectList()
    {
      $projects = Project::all();
      return response()->json($projects->toJson());
    }
}

試したこと

コントローラのreturn部分をいくつかのパターンに書き換えて試してみましたが、期待通りになりませんでした。

 return $projects;

//結果：エラー
//Uncaught (in promise) Error: Request failed with status code 500

return response()->json($projects);

//結果：エラー
//Uncaught (in promise) Error: Request failed with status code 500

 return $projects->toJson();

//結果：response.dataが空
//data:""

$jsondata = $projects->toJson();
return response()->json(['projects' => $jsondata]);

//結果：false
//data: {projects: false}

一日試行錯誤してみたのですが、どうしてもコレクションをJSON形式に変換してvueコンポーネントに渡すことができずにいます。
アドバイスのほど、よろしくお願いいたします。

Answer 1

Vueの前に、
ブラウザで/projectlistを直接表示すればエラー画面で原因が分かるはず。
500のエラー出てるならLaravel側のエラー。

Comments

[T.Takeda]

ご回答ありがとうございます。

ご教示いただいた通り、直接ブラウザで表示してみたところ、質問に記載と同じくfalseとだけ表示され、特段エラーも表示されませんでした。

やはり、falseが返ってきてしまっています。