LoginSignup
2
3

More than 1 year has passed since last update.

【Laravel livewire】プロパティ地獄を回避する

Last updated at Posted at 2022-08-19

概要

livewireで登録機能などを作る際に、入力フォームに使用するプロパティをこんな感じに宣言すると思います。

class Create extends Component
{
    public $input1,$input2,$input3;
    public $inputSelect1 = [];

    public function render()
    {
        return view('livewire.create')
    }
}

少数の入力項目ならこれでいいと思います。

以前

  • 選択肢のマスタ
  • 入力項目
  • 表示用の項目

などの宣言だけで40行ほど画面を占領した事があり、

今回40行では済まないようなプロパティ数になりそうだったので、どうにかプロパティ周りをスッキリさせたいなと模索した所
良い感じの解決策を見つけたので書いときます。

項目を配列で宣言する

入力項目の親だけを宣言し、各項目を配列の要素としてmount時に代入します。
バリデーションの記述も以下のようになり、問題ありません。

class Create extends Component
{
    public $inputs = [];

    protected $rules = [
        'inputs.input1' => 'required',
        'inputs.input2' => 'required',
        'inputs.input3' => 'required',
    ];

    public function mount()
    {
        $this->inputs = [
          'input1' => null,
          'input2' => null,
          'input3' => null,
        ];
    }
}
<input type="text" wire:model="inputs.input1">

項目数が40個ぐらいになってくると画面上邪魔ですので、mount時に別ファイルから持ってくるのも良いと思います。
今回は以下のように対応しました。

class Create extends Component
{
    public $inputs = [];

    protected $rules = [
        'inputs.input1' => 'required',
        'inputs.input2' => 'required',
        'inputs.input3' => 'required',
    ];

+    public function mount()
+    {
+        $this->inputs = Hoge::getFields();
+    }
}

[追記] updatedHogeみたいなクラスフック使いたい時どうするんだって??

$inputs['input1']の変更を検知して処理をかけたい場合

public function updatedInputsInput1()
{
    //処理
}

これで検知できます。配列まで命名規則に対応してるんすね、ビックリ

おわり

これでプロパティの宣言を最小限に抑えられそうです。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3