Livewire3 LivewireコンポーネントのプロパティにJavaScript から値を設定するには？

/ Livewire / By
ショコラ
ショコラ

Livewire3 LivewireコンポーネントのプロパティにJavaScript から値を設定するには？

LivewireコンポーネントのプロパティにJavaScript から値を設定するには
@this.set を使う。
複数のプロパティを設定することはできない。

もっさん先輩
もっさん先輩

LivewireコンポーネントのプロパティにJavaScript から値を設定する。

@this.set({プロパティ名},{値})

複数のプロパティを設定するクラスを作ってみました。

<?php
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\On;

class LiveComponent extends Component
{
  // 複数のプロパティを設定するメソッド
  #[On('set-props')]
  public function set_props( $props )
  {
    foreach ($props as $prop => $val) {
      if (property_exists($this,$prop)) {
        $this->{$prop} = $val;
      }
    }
  }
}

例

<script>
@this.set('name',name)
@this.set('address',address)
@this.set('tel',tel)
</script>

set-props メッセージで複数のプロパティを設定する。

<script>
let props = [{
  name:name,
  address:address,
  tel:tel,
}]
Livewire.dispatch('set-props',props);
</script>

以上

Scroll to Top