Livewire コンポーネントの作成について

Livewire / By

Livewire v1 のブレードでの書き方。 Livewire v2 のブレードでの書き方。↓ここまでが通常の書き方です。 view を使ってライブワイヤータグから動的に生成する方法。この後、エレメントをDOMに追加して livewire.rescan() を実行する必要があります。 こちらについては、LiveRelation に mountLivewireTagメソッド を追加しました。 ↑上は view を使いコンポーネントを作成しましたが、↓下は mountメソッド で HTML を生成することができました。 こちらについては、LiveRelation に mountComponentメソッド を追加しました。 ↓こちらが最後。LifecyleManager を使ってコンポーネントを作成する方法。これがやりたかったです。 LiveRelation に createComponentメソッド と renderComponentメソッド を追加しました。createComponent を使えば、mount後のインスタンスを取得できるので、コンポーネントのプロパティを設定したり、何かメソッドを呼び出してからレンダリングさせることができます。

Livewire Tapについて

Laravel / By

tap関数の書き方は↓下のようになります。第２パラメータの「クロージャ」のパラメーターに、「クロージャに渡す引数」が渡されます。それで戻り値に「クロージャに渡す引数」が返されます。 もう少し具体的に書くと↓下のようになります。 ソースをみたら↓下のようになっていました。たったこれだけです。 「クロージャに渡す引数」にクラスのインスタンスを渡すと、そのクラスのメソッドを呼びまくることができるというわけです。 次に、LifecycleManager.php の fromInitialRequestメソッド で使われている tap についてみてみます。new static で LifecycleManager 自身のインスタンスを tap の 第１パラメーターに設定して、クロージャを呼び出しています。$this ではないので、きっとコンポーネント毎に LifecyleManager の request、instance、response のプロパティが必要なのかな思いました。 これで LivewireManager のメソッドを呼び出しているんですね。

crontab を設定するには？

Linux / By

クロンタブを編集します。 クロンタブには以下の行を並べて書いていきます。 現在、下記のように設定がされている。 今回、８日の午前１時～午前８時までメンテナンスで処理を止めることになりましたので、その設定をします。 今日から７日までは今まで同じように動かす。 ８日の午前０時～午前０時５０分まではコマンドを動かす。１時前にコマンドを止めておきます。 メンテ終了後に設定を戻しますが、ひとまず８日の午前８時～午後２３時までコマンドを動かすようにしておきます。 編集が終わりましたので「:wq」で保存します。

PHP 先頭文字の確認方法

PHP / By

少し前に、文字列の先頭が / から始まっているかを確認する処理をなんとなく書きました。 そうえいば、文字列の先頭の文字は[0]で取得できるよなぁと思いました。 大体は動きますけど、これには違いがありました。 ①空文字の場合、[0]のやり方だと警告がでます。str_starts_with では警告はでません。 ②マルチバイトの場合、[0]のやり方だと false になります。str_starts_with だと true になります。 そういうことに気を付けて、プログラムしましょうというお話でした。 きっと、str_starts_with 以前は substr や mb_substr の処理だったのだと思いました。ワーニングはでません。

Livewire コンポーネントID を取得するには？

Livewire / By

コンポーネントのコントローラー、ビュー（BLADE）でコンポーネントＩＤを取得する方法 コンポーネントのビュー（BLADE）でコンポーネントＩＤを取得する方法。 JavaScript で コンポーネントＩＤ を取得する方法。 Livewire.all で コンポーネントＩＤ を取得する方法。 ↓下の方法で コンポーネントＩＤ を取得することはできません。

Livewire Livewire.rescan について rescan

Livewire / By

Laravel と Livewire をインストールして、親と子のコンポーネントで複数のプロパティをバインディングして同期されるかを確認 インストール時にプロジェクト名のディレクトリが作成されます。 ↓下のメッセージが表示されてインストールは終わります。 Laravel のインストールはここまで。 ↑mountLivewireTagメソッド内で、render_blade関数 でライブワイヤーコンポーネントを HTML に変換して、createComponentイベントを送ります。 ① createボタン を押して ParentComponentクラス の createメソッド が呼び出します。② mountLivewireTagメソッド内で、render_blade関数 でライブワイヤーコンポーネントを HTML に変換して、createComponentイベントを送ります。③ JavaScript の createComponentハンドラ でエレメントを作成して、Livewire.rescan で認識させます。

Livewire 親子のコンポーネントで複数のプロパティを更新するには？oyako5

Livewire / By

Laravel と Livewire をインストールして、親と子のコンポーネントで複数のプロパティをバインディングして同期されるかを確認 プロジェクト名（oyako5）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 LiveRelationトレイト を作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/ParentComponent.php ライブワイヤーの親コンポーネントのビューを作成します。resources/views/livewire/parent-component.blade.php ↑のポイントは５行目の「bind=”counter1,counter2″」です。ここで 親コンポーネントの counter1とcounter2のプロパティを子コンポーネントのプロパティ を紐づけています。 ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/ChildComponent.php ライブワイヤーの子コンポーネントのビューを作成します。resources/views/livewire/child-component.blade.php ↑のポイントは３，４行目でcounter を defer にしています。５行目でリフレッシュさせて同期させています。 public/liveext.js を作成します。 resources/views/index.blade.php を作成します。 routes/web.php にルートを定義します。 ブラウザでアクセスしてみましょう。 COUNTER1 と COUNTER2 に値をいれて、リフレッシュボタンを押すと、バインディングされた親のコンポーネントの COUNTER1 と COUNTER2 が同期されます。

Livewire クラスメソッドから親コンポーネントにだけイベントを送るには？emitParent

Livewire / By

完成系は↓こちらです。 Laravel と Livewire をインストールして、emitParent のサンプルプログラムを作成してみます。 プロジェクト名（emitParent）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に 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 LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.php ファイル を作成します。 routes/web.php にルートを追加します。 ブラウザで確認します。 ↑上が Grandchild …

Livewire クラスメソッドから親コンポーネントにだけイベントを送るには？emitParent Read More »

Scroll to Top