完成は↓こちらです。 Laravel と Livewire をインストールして、JavaScript で イベントを送信して、ライブワイヤーコンポーネントでイベントを受信してみましょう。 プロジェクト名（liveevent2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージをインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 ライブワイヤーのテキストコンポーネントを作成します。app/Http/Livewire/TextComponent.php ライブワイヤーをテストするビューを作成します。resources/views/liveevent-js.blade.php routes/web.php にルートを定義します。 ブラウザでアクセスしてみましょう。 「JavaScript からイベント送信」ボタンを押すと、JavaScript の Livewire.emit で messageイベント を送信し、ライブワイヤー のテキストコンポーネントで messageイベント を受信します。※単純に、ボタンを押してテキストボックスに値を入れているわけではありません。

完成は↓こちらです。 Laravel と Livewire をインストールして、ライブワイヤーコンポーネントのアクションメソッドから、イベントを送信して HTMLでイベントを受信してみましょう。 プロジェクト名（liveevent1）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージをインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 ライブワイヤーのイベントコンポーネントを作成します。app/Http/Livewire/EventComponent.php ↓wire:click に $emit を書いてイベントを発生させることもできます。app/Http/Livewire/EventComponent.php ライブワイヤーのテキストコンポーネントを作成します。app/Http/Livewire/TextComponent.php ライブワイヤーをテストするビューを作成します。resources/views/liveevent.blade.php routes/web.php にルートを定義します。 ブラウザでアクセスしてみましょう。 「イベント送信」ボタンを押すと、①wire:click で EventComponent の clickメソッド が呼び出され、その中で messageイベント を発生させます。②HTML の 「Livewire.on」で messageイベント を受信して、「メッセージがキター」のアラートを表示します。③ TextComponent のイベントリスナーでも messageイベント を受信して、画面に値を表示します。

Hooks Description boot コンポーネントがインスタンス化された直後、他のライフサイクルメソッドが呼ばれる前に、リクエストごとに実行されます。（翻訳）私的にはコンストラクタ。 booted コンポーネントがマウントまたはハイドレートされた後、アップデートメソッドが呼ばれる前に、すべてのリクエストで実行されます。（翻訳）マウントの後とハイドレードの後に呼び出される。 mount コンポーネントのインスタンスが作成された直後、render()がコールされる前に一度だけ実行されます。これは最初のページロード時に一度だけ呼ばれ、たとえコンポーネントが更新されたとしても、再び呼ばれることはありません。（翻訳）私的には initメソッド。 プロパティの初期値を設定する。 dehydrate コンポーネントのレンダーの後に呼び出される。この後にコンポーネントが再描画が行われる。例えば dehydrateフック でプロパティの値を変えると、変えた値でコンポーネントが表示される。私的には create メソッド。 dehydrateFoo ↑上の dehydrateフック の後に呼び出される。defydrateFoo は $foo プロパティが定義されていないと呼び出されない。 hydrate コンポーネントのレンダーの前に呼び出される。 hydrateFoo ↑上の hydrateフック の前に呼び出される。 updating Livewireコンポーネントのデータが更新される前に実行される。（翻訳） updated Livewireコンポーネントのデータが更新された後に実行されます。（翻訳） updatingFoo foo という名前のプロパティが更新される前に実行されます。配列のプロパティは、updatingArray($value, $key)のように、配列内の変更する要素を指定するためにこの関数に渡される追加の$key引数を持ちます。（翻訳） updatedFoo fooというプロパティが更新された後に実行されます。配列のプロパティは、上記のように追加の $key 引数を持ちます。（翻訳） updatingFooBar foo プロパティまたは $fooBar や $foo_bar などのマルチワード プロパティのネストされたプロパティ バーを更新する前に実行されます。（翻訳） updatedFooBar fooプロパティ、または$fooBarや$foo_barなどのマルチワード・プロパティにネストされたプロパティ・バーを更新した後に実行されます。（翻訳） 親コンポーネント 子コンポーネント 画面を表示した時のログ …

Livewire ライフサイクル フックについて Read More »

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

完成は↓こちらです。 Laravel と Livewire をインストールして、ライブワイヤーの親子のコンポーネントを作成してみます。 プロジェクト名（oyako1）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージをインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/ParentComponent.php ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/ChildComponent.php ライブワイヤーをテストするビューを作成します。resources/views/livewire.blade.php routes/web.php にルートを定義します。 これでブラウザから /livewire でアクセスできるようになりました。 ブラウザでアクセスしてみましょう。 キーボードからテキストボックスに何か入力すると、隣の文字（「親から値を設定」）が変わります。子コンポーネントが正しく動作しています。 次に、親コンポーネントで子コンポーネントの値を受け取るにはどうしたらいいのでしょうか？続く・・・