Laravel内でVue.jsを使うときにつまづいたところを、備忘録として雑多に書いていく。
bootstrap-vueを使う方法
以下の記事を参照
Qiita - laravelでbootstrap-vueを使う
vueやbootstrapがすでに導入されているなら、npm i bootstrap-vueでオッケー。
JSを読ませる場所
headタグ内か、bodyタグ内の最下部か。
JSを使うときに、HTMLをよりも先にJSを読ませると、ページの表示が遅くなってしまう。
それを防ぐのに、bodyタグ内の最下部に書く方法がおすすめされていた。
Laravel7を使っているときに、もともと付いていたBladeファイルは、headタグ内に書かれていて、なんでだろうと調べたら、scriptタグにdeferがついている。どうやらこれをつけることで、HTMLの描画がおこなわれたあとにJSが実行されるとのこと。
<html>
<head>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
</body>
</html>
### blade内のタグ内でLaravel（php）表記したいとき
**{!! !!}**を使う。
bladeテンプレート内でのVueコンポーネントの使い方例
<progress-bar
v-bind:value="@json(Auth::user()->getCountMaster($skills->first()->rank))"
max="{{$skills->count()}}"
>
</progress-bar>
valueはvueで動的に値を変更したいので、v-bindディレクティブをつけている。v-bindディレクティブ内はphp構文ではだめで、json形式が必要。なので、@json（Laravel構文（php））で渡している。を
一方、maxはvueで値を動かさないので、v-bindディレクティブはつけないで渡す。{{}}で変数を展開して渡している。
親子関係
テンプレートを使って、bladeに読み込ませるときの親子関係は以下の通り。
親は、app.jsを読み込ませたbladeファイル。
子は、テンプレートの単一コンポーネントファイル。
親子間のデータ受け渡し
・親 -> 子へは、propsを使用する。
・子 -> 親へは、$emitを使用して、親のコンポーネントを発火させて、データを渡す。
・子1 -> 親 -> 子2は、Qiita - Vue.js 親・子 コンポーネント間 データ 受け渡しの記事を参考にする。イベント名はケバブケースが良いみたい。