Laravel

Livewire emitUpで親コンポーネントにイベントを送るには？emitUp

Livewire / By

完成系は↓こちらです。 Laravel と Livewire をインストールして、emitUp のサンプルプログラムを作成してみます。 プロジェクト名（emitUp）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、parent-formコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、render メソッド を定義しなくても livewire.parent-form は呼び出されます。 生成された parent-formコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/ParentForm.php resources/views/livewire/parent-form.blade.php child-formコンポーネント のクラスとビューを作成します。 app/Http/Livewire/ChildForm.php resources/views/livewire/child-form.blade.php grandchild-formコンポーネント のクラスとビューを作成します。 app/Http/Livewire/GrandchildForm.php resources/views/livewire/grandchild-form.blade.php resources/views/index.blade.php ファイル を作成します。 routes/web.php にルートを追加します。 ブラウザで確認します。 ↑上が Grandchild の「emitUp message」ボタン を押した実行結果です。「$this->emit()->up()」で、Child と …

Livewire emitUpで親コンポーネントにイベントを送るには？emitUp Read More »

Livewire で Fomantic-UI のダイアログ（Modal）を使うには？

Livewire / By

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 にルートを追加します。 …

Livewire で Fomantic-UI のダイアログ（Modal）を使うには？ Read More »

Livewire @parentディレクティブ

Livewire / By

@parent ディレクティブ は app/Providers/AppServiceProvider.php に定義します。 親コンポーネントだけにイベントを送るには @parent.emitSelf を使います。@parent.emit だと全体にイベントが送られてしまいます。 ↑これは。。。ようするに emitUp ↓です（爆）。親だけに送るから少し違いますね。 or

Livewire @js ディレクティブ とは？

Livewire / By

以下のソースは、ボタンを押すと、photo_pathプロパティ をコンソールログに出力するというものです。 ボタンを押すと、コンソールログには null が出力されます。 scriptタグ は wire:ignore 的な扱いになっているので（私的に）、photo_pathプロパティ を更新しても、初期状態の null が出力されます。そうすると、scriptタグ内の @jsディレクティブ は初期状態の値しか取得できないのかな？と思いました。 scriptタグ に id属性 を与えると反応するようになりますが、これも少し違う気がします。。。 ↑addEventListener なので、2行出力されます。 以下のように、onClickハンドラ に書けば最新の情報を出力することはできました。 scriptタグ内 で 最新の @js を扱うにはどうすればいいのか？ここは今後調査していこうと思います。

Livewire JavaScript で emitSelf、emitUp のやり方

Livewire / By

wire:click で自身のアクションメソッドを実行できます。 ↑上は↓下のように @this.debug と書くことができます。 JavaScript で自身へイベントを送るには「@this.emitSelf」と書きます。 JavaScript で親へイベントを送るには「@this.emitUp」と書きます。

Livewire @thisディレクティブ

Livewire / By

@thisディレクティブの定義は↓こちら。vendor/livewire/livewire/src/LivewireBladeDirectives.php 今まで自身のアクションメソッドを呼び出すときは、↓下のように、findを使って呼び出していましたが @this だけでいけちゃいます↓↓↓ P.S.「$this->id」を「$_instance->id」に置き換えることができることを確認しました。

Livewire でファイルを複数アップするには？wire:key

Livewire / By

Laravel と Livewire をインストールして、複数ファイルをアップロードするサンプルプログラムを作成する手順。 プロジェクト名（uploa2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、uploadコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.upload は呼び出されます。 生成された uploadコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Upload.php ↑ファイルアップロードフォームを作成る場合、WithFileUploadsトレイト を使います。 resources/views/livewire/upload.blade.php formsコンポーネント のクラスとビューを作成します。 app/Http/Livewire/Forms.php resources/views/livewire/forms.blade.php ↑ここポイントです。for のループで同じ livewireタグ を生成する場合、 wire:key属性 に $i を指定します。 LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.phpファイル を作成します。 routes/web.php に Livewireコンポーネント …

Livewire でファイルを複数アップするには？wire:key Read More »

Scroll to Top