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が実行されるとのこと。

index.blade.php

<html>
<head>
    <script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
</body>
</html>

~~### blade内のタグ内でLaravel（php）表記したいとき~~

**{!! !!}**を使う。

bladeテンプレート内でのVueコンポーネントの使い方例

index.blade.php

<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　親・子　コンポーネント間　データ　受け渡しの記事を参考にする。イベント名はケバブケースが良いみたい。