Laravel5.5 サーバ側から値付きでviewに渡す→jsファイルを分けるとその変数読み込まない

Question

Laravel5.5にて学校システムを構築しております。
その中のとあるcontrollerで授業可能な先生の一覧を取得し、viewに渡しています。

return view('mypage.main')->with([
    'available_teachers' => $available_teachers
]);

//わたしたbladeファイルの<script>内にて下記のように記述
//  →エラーもなく、html内にて表示もできる(json_encodeしてvue.jsとしてbrowser上に表示させる)

<script>
var available_teachers = @json($available_teachers);

しかしこのコードをpublic/js/student/schedule.jsを作成し、そこに記述
→下記のエラー

Uncaught SyntaxError: Invalid or unexpected token

サーバ側でjson_encode($available_teachers)
→jsのファイル内にてvar available_teachers = $available_teachers;
→not defienedのエラー

schedule.js:1 Uncaught ReferenceError: $rows is not defined

ということはそもそもサーバ側からわたされた情報を,public/js内で作成したファイルでは読み込めてないのか？？
ここで困っております、よろしくお願いいたします。

Answer 1

laravel(PHP）の変数$available_teachersはblade.phpファイル内でしか扱えません。
jsファイルまで見に行って代入してくれるものではないのです。

なので、セキュリティ上最重要なtokenをJSに渡すのでさえ、
本文のスクリプトやmetaデータとして描画しておいて
jsからエレメント経由（またはwindowグローバル変数）としてjsで受け取っているのです。

larabel から　vue(js)へ変数を渡す方法は２つのみです。
①ここの方法でHTMLに一旦グローバル変数やタグ要素として書き込む
②axios等のHTTPリクエスト通信でやりとりする

Comments

[kazoogon]

ということは無理にファイルを分けるのではなく、bladeファイル内の<script>内で記述するのがbestということでしょうか？？

[vapordog]

残念ながらbestとしてのおすすめは2番目です。本文スクリプトに書くという対応は、直面している[動かない]問題のに対してはひとつの解決方法ではあるのですが、
この方法ではリロードが行われないとデータが取得できません。
常に状態が移り変わり、最新のデータがほしいavailable_teachersのようなデータをvueで扱う場合、最新データが欲しくなるたびに都度リロードという制約は厄介に思うことが多くなると思います。

[kazoogon]

なるほど。
今実装としては、本文script内にてjsを記述し、日付ごとのavailable_teachersをaxiosでAPI叩いて呼んでおります。
vapordogさんの回答はこの実装のことを指していますでしょうか？？

[vapordog]

そうですね

[kazoogon]

了解です、回答ありがとうございました！