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 »

Livewire ラジオボタンのサンプル radio

Livewire / By

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

Livewire アクションパラメーターに型ヒントを与えて、モデルで受け取るには？

Livewire / By

Laravel と Livewire をインストールする。ブレード側でアクションを呼び出し、コントローラー側のアクションではモデル（クラス）で受け取る手順。 プロジェクト名（rating2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、ratingコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.rating は呼び出されます。 生成された Ratingコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Rating.php ↑上の「public function update(LiveData $data)」のアクションメソッドは大注目です。ブレード側で配列で渡した値を LiveDataクラス で受け取っています。 resources/views/livewire/rating.blade.php ↑上のポイントは「@this.emitSelf(‘update’,Livewire.data())」です。ここでアクションの updateメソッド に渡しているのは、クラスでは無く配列です。 LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します。 ブラウザで確認します。 イベント、アクションボタンを押したときに、updateメソッド が呼び出されます。updateメソッドで …

Livewire アクションパラメーターに型ヒントを与えて、モデルで受け取るには？ Read More »

Livewire で Fomantic-UI の評価（Rating）を使うには？パート２

Livewire / By

Laravel と Livewire をインストールして、Fomantic-UI の評価（Rating）を使う手順。 プロジェクト名（rating2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、ratingコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.rating は呼び出されます。 生成された Ratingコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Rating.php resources/views/livewire/rating.blade.php ポイントは「wire:ignore」と「@this.set()」です。setの第３パラメータは defer です。「{{ $this->id }}」の部分は当初は ID属性 にしていましたが、うまくいかないパターンがあり、クラスに含めるようにしました。 LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。 tail で onRate（ユーザーが評価を選択した後）のタイミングで通信していることを確認しましょう。

PHPで変数の中身を返すには？

PHP / By

Laravel で var_export の結果をログファイルに出力するなら↓下のように書きます。 「var_export does not handle circular references」のエラーが表示されたら、var_export の代わりに print_r を使う。 Laravel で print_rの結果をログファイルに出力するなら↓下のように書きます。 昔 、わざわざ下のようにやってしまっていたかも・・・。

Livewire で Fomantic-UI の評価（Rating）を使うには？wire:ignore編

Livewire / By

Laravel と Livewire をインストールして、Fomantic-UI の評価（Rating）を使う手順。 プロジェクト名（rating）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、ratingコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.rating は呼び出されます。 生成された ratingコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Rating.php resources/views/livewire/rating.blade.php には↓下の２つのやり方があります。 ① @this.set() で設定する方法 ポイントは「wire:ignore」と「@this.set()」と「Livewire.on(‘set-rating’,…)」です。↓下のプロパティに設定する方法もありますが、第３パラメーターで defer が設定できるので set が良いと思います。Livewire.on ではアクションメソッドで送信された値を設定しています。 ② @this.プロパティ に設定する方法 ポイントは「wire:ignore」と「@this.プロパティ=value」と「Livewire.on(‘set-rating’,…)」です。 resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。 …

Livewire で Fomantic-UI の評価（Rating）を使うには？wire:ignore編 Read More »

Livewire 親子のコンポーネントについて、親のプロパティを更新するには？LiveRelationトレイト編２ oyako4

Livewire / By

Laravel と Livewire をインストールして、LiveRelationトレイトを使う手順。 プロジェクト名（oyako4）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 今回のメイン。LiveRelationトレイト を作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/Counter.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの親コンポーネントのビューを作成します。resources/views/livewire/counter.blade.php ↑のポイントは２行目の「bind=”count2:count”」です。ここで 親コンポーネントの count2プロパティ と 子コンポーネントの countプロパティ を紐づけています。 ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/Child.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの子コンポーネントのビューを作成します。resources/views/livewire/child.blade.php ↓下は旧書き方です。@this.increment で Livewire.data() を渡しています。 ↑のポイントは２行目の「bind=”count”」です。ここで 子コンポーネントのcountプロパティ と 孫コンポーネントのcountプロパティ を紐づけています。 ライブワイヤーの孫コンポーネントを作成します。app/Http/Livewire/GrandChild.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの孫コンポーネントのビューを作成します。resources/views/livewire/grand-child.blade.php ↑孫コンポーネントはプロパティの紐づけはしません。 public/liveext.js を作成します。 resources/views/index.blade.php を作成します。 …

Livewire 親子のコンポーネントについて、親のプロパティを更新するには？LiveRelationトレイト編２ oyako4 Read More »

Livewire JavaScriptで全てのコンポーネントのプロパティを取得するには？

Livewire / By

「ページ上の全ての Livewire コンポーネントを取得する」には Livewire.all() を使います。 以下のようにすればコンポーネントのプロパティの値を取得することができますが、この component はどうも Proxy となっていて生のコンポーネントにアクセスしているわけではないみたいです。 生のコンポーネントにアクセスするには __instance を使います。 生のコンポーネントを使えば、id にアクセスすることや、data、childIds、name にもアクセスすることができます。 そして、今回のテーマ「JavaScriptで全てのコンポーネントのプロパティを取得するには？」は以下の Livewire.data関数 になります。 public/liveext.js resources/views/index.blade.php PHP側 で他のコンポーネントの値を参照する場合には、全てのコンポーネントのプロパティを Livewire.data() で送って参照してみようかなと思いました。

Livewire アクション、$emit、$emitSelfの動作の違いについて

Livewire / By

Laravel と Livewire をインストールして、アクション、$emit、$emitSelf の動作の違いについて確認する手順。 プロジェクト名（liveevent2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、eventコンポーネント を生成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/Event.php resources/views/index.blade.php を作成します。 routes/web.php にルートを定義します。 ブラウザでアクセスして、動作の違いを確認してみましょう。

Scroll to Top