Livewire 親子のコンポーネントについて oyako1

完成は↓こちらです。 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 でアクセスできるようになりました。 ブラウザでアクセスしてみましょう。 キーボードからテキストボックスに何か入力すると、隣の文字(「親から値を設定」)が変わります。子コンポーネントが正しく動作しています。 次に、親コンポーネントで子コンポーネントの値を受け取るにはどうしたらいいのでしょうか?続く・・・

Livewire 親子のコンポーネントについて oyako1 Read More »

Laravel ライブワイヤーのメモ

①ライブワイヤーコンポーネントでは IDプロパティ は定義できない。 ②ライブワイヤーコンポーネントで renderメソッド を定義しない場合は、以下のファイルが使われる。 ③ライブワイヤーコンポーネントには、ブレードコンポーネントにはあった {{attributes}} が無い。 ④ライブワイヤーのアクションを実行する前に、JavaScript で確認を入れる書き方。 ⑤ライブワイヤーコンポーネントを動的に作成する場合は、wire:key を設定する。 ⑥ライブワイヤーコンポーネントの表示の仕方。 ↓はPHP7 以降の書き方なので、こちらの方が新しい。 ↓は過去の書き方。 ⑦ライブワイヤーコンポーネントのプロパティを設定する。 ⑧JavaScript でライブワイヤーコンポーネントのプロパティを設定する。 ⑨JavaScript でフォームの値を変更した場合にライブワイヤーコンポーネントのプロパティを更新するには、フォームで inputイベント を発生させる。 ⑩ライブワイヤーコンポーネントは formタグ で囲む必要はない。 ⑪JavaScript からはコンポーネントを find することはできるが、Componentクラス からは find することはできない。 ⑫JavaScript からは任意のコンポーネントのメソッドを呼び出すことはできるが、Componentクラス からは find できないので、任意のコンポーネントのメソッドを呼び出すことはできない。全体に向けて、イベントを送ること(emit)はできる。

Laravel ライブワイヤーのメモ Read More »

Ubuntu にドッカーデスクトップをインストールするには?

インストールしたばかりのデスクトップ版 Ubuntu Desktop 22.04.1 LTS に、ドッカーデスクトップ をインストールしたらエラーが表示された。 デスクトップ版 Ubuntu Desktop 22.04.1 LTS に、ドッカーデスクトップ をインストールする手順。 インストール中に apt update していないとエラーになりますので、その時は apt update を実行します。 ↓の状態が、KMVモジュール が有効な状態です。 この「KVMグループ にユーザーを入れる」は超重要です。抜かしてしまうと、ドッカーデスクトップを起動しても「Docker Desktop stopped…」となってしまってドッカーデスクトップが使えません。 ここの手順は https://docs.docker.com/engine/install/ubuntu/#set-up-the-repository のページの「Set up the repository」に書かれています。 最後に表示されるワーニングは無視でOKです。 ドッカーデスクトップの Settings にある Kubernetes で「Enable Kubernetes」にチェックを入れて「Apply & Restart」ボタンを押したけれど、kubectlコマンド・・・入っていませんね。 kubectlコマンド のインストール ドッカーデスクトップをインストールしましたが、kubectlコマンド はインストールされていませんでした。引き続き、kubectlコマンド のインストールと Kubernetes の動作確認を行います。 ここの手順は https://kubernetes.io/docs/tasks/tools/install-kubectl-linux/#install-using-native-package-management のページの「Install using native package

Ubuntu にドッカーデスクトップをインストールするには? Read More »

Laravel ログを出力するには?

ログの基本 Log クラスをインポートする。\Logでもアクセスできます。 Log クラスをインポートしないで、\Logだけでも使えます。 ログに変数の内容を出力するには、第2パラメータに設定する。 ログの出力先は↓こちら。 ログレベルは .env で設定する。例えば info と設定すると、debugレベル のログは出力されなくなる。 ログの種類 debugログ(開発中のログはこれで良いと思う) infoログ noticeログ warningログ errorログ criticalログ alertログ emergencyログ

Laravel ログを出力するには? Read More »

CSS body の背景画像を設定した。その上にある要素の背景を少し透明にするには?

body に背景画像を付ける。ブラーで画像を少しぼかす。カバーで画像を引き延ばして、fixed でスクロールしても動かないように固定する。 その背景の上に segment を配置した。segment の背景の白色を少しだけ透けるようにしたい気分になった。

CSS body の背景画像を設定した。その上にある要素の背景を少し透明にするには? Read More »

Scroll to Top