Laravel

Laravel と Livewire をインストールして、ライブワイヤーの親子のコンポーネントを作成してみます。 プロジェクト名（wireble）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 ライブワイヤーをテストするビューを作成します。resources/views/livewire.blade.php routes/web.php にルートを定義します。 これでブラウザでアクセスできるようになりました。 データ転送オブジェクトを作成します。。app/Http/Livewire/Settings.php ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/ParentComponent.php イベントをキャッチするには「protected $listeners」に定義します。 注目するポイントは３３行目の「:settings=”$settings”」です。モデルではなくオブジェクトを渡しているところです。 ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/ChildComponent.php 親にイベントを送るには「emit()->up()」を使います。 ブラウザでアクセスしてみましょう。 キーボードから子コンポーネントのテキストボックスに何か入力すると、クリアボタンの下の文字（子コンポーネント）と親コンポーネントの文字が変わります。子コンポーネントからイベントを発行して、親コンポーネントの Settings を更新することができました。 ↑当初は子コンポーネントでオブジェクトを変更したら、イベントを発行しなくても親オブジェクトの値も変更されるのかなぁ？と思って確認してみたという感じです。 今回、子コンポーネントの dehydrateフック でイベントを発行しました。当初は updatedフック でイベントを発行していました。テキストボックスに値を入力した場合には、updatedフック が呼び出されますが、クリアボタンを押してプロパティを書き換えた場合には、updatedフック は呼び出されません。dehydrateフック でイベントを発行しない場合は、updateフック と clickメソッド でイベント発行しなくてはなりません。

Laravel と Livewire をインストールして、ページネーションのサンプルプログラムを作成する手順。 インストール時にプロジェクト名のディレクトリが作成されます。 ↓下のメッセージが表示されてインストールは終わります。 Laravel のインストールはここまで。 次の 2つ のファイルが生成されます。 ※因みに、render メソッド を定義しなくても livewire.pagination は呼び出されます。 「フルページコンポーネントは resources/views/layouts/app.blade.php の {{ $slot }} にレンダーされる」と見かけましたが、ここまでの手順で app.blade.phpファイル はできていませんでしたので作成します。 ブートストラップに対応する。 ブートストラップのボタンに変わりました。

Laravel と Livewire をインストールして、フラッシュメッセージのサンプルプログラムを作成する手順。 プロジェクト名（flash）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、flashコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、render メソッド を定義しなくても livewire.flashは呼び出されます。 生成された flashコンポーネント のクラスとビューを次のように置き換えます。 「@if (session(‘message’))」と書いても問題ないです。 resources/views/layouts/app.blade.phpファイル を作る為に、layoutディレクトリ を作成します。 「フルページコンポーネントは resources/views/layouts/app.blade.php の {{ $slot }} にレンダーされる」と見かけましたが、ここまでの手順で app.blade.phpファイル はできていませんでしたので作成します。 resources/views/layouts/app.blade.phpファイル を作成します。 web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。 「flash message」ボタンを押すと、フラッシュメッセージを登録します。リロードボタンを押すと、フラッシュメッセージは消えます。

Laravel と Livewire をインストールしてフォームのサンプルプログラムを作成する手順。 プロジェクト名（form）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、formコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、render メソッド を定義しなくても livewire.formは呼び出されます。 生成された formコンポーネント のクラスとビューを次のように置き換えます。 resources/views/layouts/app.blade.phpファイル を作る為に、layoutディレクトリ を作成します。 「フルページコンポーネントは resources/views/layouts/app.blade.php の {{ $slot }} にレンダーされる」と見かけましたが、ここまでの手順で app.blade.phpファイル はできていませんでしたので作成します。 resources/views/layouts/app.blade.phpファイル を作成します。 web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。イベントは画面で確認できます。