Livewire

Laravel と Livewire をインストールして、Fomantic-UI の Slider を使う手順。 プロジェクト名（slider）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、progressコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.slider は呼び出されます。 生成された sliderコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Slider.php ↑デハイドレートで createメッセージ を送信しています。 resources/views/livewire/slider.blade.php ↑コンポーネントの配置と、createメッセージ を受信したらスライダーを表示するようにします。 resources/views/index.blade.php ファイル を作成します。 ↑ライブワイヤーのロード時に、createメッセージ を送信してスライダーを表示しています。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。

Laravel と Livewire をインストールして、Fomantic-UI の Toast を使う手順。 プロジェクト名（toast）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、progressコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.toast は呼び出されます。 生成された toastコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Toast.php ↑上の説明です。click1メソッド は、JavaScript を evalイベントで送って JavaScript を実行する方法です。click3メソッド は、settings（JSON）を toastイベント を送って toast を表示する方法です。 resources/views/livewire/toast.blade.php resources/views/index.blade.php ファイル を作成します。 ↑eval と toast のイベントを Livewire.on で受信して、スクリプトを実行するようにします。※

Laravel と Livewire をインストールして、ドロップダウンのカスタムディレクティブを作成する手順。 インストール時にプロジェクト名のディレクトリが作成されます。 ↓下のメッセージが表示されてインストールは終わります。 Laravel のインストールはここまで。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.multiple は呼び出されます。 app/Http/Livewire/Multiple.php resources/views/livewire/multiple.blade.php ↑注目です。２行目に「wire:module=”dropdown”」と「wire:module.settings=”window.settings()”」を追加しました。JavaScript で dropdownメソッド の呼び出しは行っていません。 ↑Livewire.directive で「wire:module」を定義しています。これでエレメントに対して dropdownメソッド を実行するようにします。一見「できたかな」と思ったのですが、「Transition: Element is no longer attached to DOM. Unable to animate. Use silent setting to suppress this warning in production. slide down out」のエラーがでてしまいましたので、エレメントを destroy で削除しています。そうすると onHide が呼び出されないので、何か考えなければならないかもしれません。 カスタムディレクティブを使うことで、ブレードファイルに JavaScript を書くことなく、コンポーネントを表示することができました。

Laravel と Livewire をインストールして、Fomantic-UI の Multiple Selection を使う手順。 プロジェクト名（multiple）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、progressコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.multiple は呼び出されます。 生成された multipleコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Multiple.php resources/views/livewire/multiple.blade.php resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。

Laravel と Livewire をインストールして、Fomantic-UI の Progress を使う手順。 プロジェクト名（progress）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、progressコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.progress は呼び出されます。 生成された progressコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Progress.php ↑デハイドレートで「create」メッセージを送っています。wire:poll で checkメソッド が呼ばれた後も、デハイドレートを通って createメッセージ を送り、Livewire.on(‘create’ で受け取ります。 resources/views/livewire/progress.blade.php ポイントは１行目の「wire:ignore」で再描画を抑えているところと「wire:poll」で定期的に checkメソッドを呼び出しているところです。 resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。 wire:model が使えないコントーラーについて、前回は Rating

Laravel と Livewire をインストールして、Fomantic-UI の評価（Rating）を使う手順。 プロジェクト名（rating）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、ratingコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.rating は呼び出されます。 生成された ratingコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Rating.php ↑上のポイントは、プロパティ更新時の updatedメソッド で、refreshイベント を発行して評価コンポーネントを再描画するようにしているところです。 resources/views/livewire/rating.blade.php ポイントは１行目の「wire:ignore」を消したところと、「@this.set()」と「Livewire.on(‘set-rating’,…)」です。 resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。 tail で onRate（ユーザーが評価を選択した後）のタイミングで通信していることを確認しましょう。 ちょっと、どうにかならないのかなと思うのが２点①Ratingクラスに updatedメソッドを作り、イベントを発行しなければならない点。②rating.blade.php でイベントを受け取り、再描画する為に ratingメソッド が２回呼ばれている点。 ①に関しては、イベントを発行する場所をデハイドレートにして解決できました。

Form間で値をコピーするサンプルプログラムを作成してみます。 Laravel と Livewire をインストールして、emitSet で他コンポーネントのプロパティを更新する手順。 プロジェクト名（emitSet）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、formコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.formは呼び出されます。 生成された formコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Form.php ↑上のポイントは、copyクラスメソッド 内で $data[$this->to] で 他のコンポーネント の値を書き換えます。過去は、書き換え後に emitSetメソッド を呼ぶ必要がありましたが、現在は emitSet する必要はありません。 resources/views/livewire/form.blade.php LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.php ファイル を作成します。 routes/web.php にルートを追加します。 ブラウザで確認します。 各Copyボタン を押すことで、Form間で値のコピーを行うことができます。

Laravel と Livewire をインストールして、Fomantic-UI のダイアログ（Modal）を使う手順。 プロジェクト名（modal）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、modalコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.modal は呼び出されます。 生成された Modalコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Modal.php ↑ダイアログクラスには 表示状態（visible）と 承認ハンドラ（onApprove）のプロパティを持たせます。 resources/views/livewire/modal.blade.php ↑表示状態（visible）が false なら表示しません。approveボタン が押された場合、承認ハンドラ（onApprove）を実行します。ダイアログが非表示になるタイミングで、エレメントを削除して、表示状態（visible）を false に設定しています。 formsコンポーネント のクラスとビューを作成します。 app/Http/Livewire/Forms.php resources/views/livewire/forms.blade.php LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.php ファイル を作成します。 routes/web.php にルートを追加します。