コンポーネントファイルの中で変数を使う方法を説明します。
サイドバーやナビゲーションバーにForeachを利用したい時などに便利です。
Laravel コンポーネントファイルの中でForeachを使う方法
componentsフォルダ内のtest.blade.phpの中で、foreachを使うとします。
これをビューファイルに表示させます。
次の流れで進めていきます。
【流れ】
- コントローラーに変数を設定
- 【php artisan make:component】でcomponentsを作成
- components設定ファイルで変数を定義
- componentsテンプレートファイルで変数を使ってforeach文記述
- ビューファイルを編集
既にルート設定済みのビューファイルとコントローラーがあるとして、説明を進めていきます。
①コントローラーに変数を設定
実際の開発ではこの部分はできていて、2の部分から始まるかと思います。
今回はテスト用なので、下記のように $menus 配列を準備しておきます。
|
1 2 3 4 5 6 |
public function trial(){ $menus = array('pasta', 'curry', 'cake'); return view('trial', compact('menus')); } |
②componentsを作成
下記のコマンドを実行します。
|
1 |
php artisan make:component Test |
次の二つのファイルができます。
- app/View/Components に Test.phpファイル
- resources/views/components に test.blade.phpファイル
③Components設定ファイルで変数を定義
app/View/Components に Test.phpファイルを開きます。
$menusを定義していきます。
ファイルの上部に下記をいれます。
|
1 |
public $menus; |
ファイルの真ん中あたり、コンストラクタ（__construct）の中に、下記をいれます。
|
1 2 3 4 |
public function __construct($menus) { $this->menus = $menus; } |
全体は次のようになります。
④componentsテンプレートファイルで変数を使ってforeach文記述
resources/views/components に test.blade.phpファイルに次のようにforeach文をいれます。
|
1 2 3 4 5 6 7 |
<div> <ul> @foreach($menus as $menu) <li>{{$menu}}</li> @endforeach </ul> </div> |
⑤ビューファイルを編集
最後に、ビューファイルに下記のようにいれます。
|
1 2 |
メニュー一覧 <x-test :menus=$menus /> |
これで準備完了です。
ビューファイルを表示すると、次のようになっています。
テンプレートファイルを使うだけなら@extendsなどのほうが手軽です。
ただcomponentsを活用すると、テンプレートファイルを作るだけでなく、上記のようなこともできて便利。
このほかに、componentsで変数を使ってページごとに表示を変えたりもできます。
下記で解説しています。
