Livewire @thisディレクティブ

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

Livewire @thisディレクティブ

「@this ディレクティブ」を発見しました。

発見場所は vendor/livewire/livewire/src/LivewireBladeDirectives.php です。
これで「Livewire.find(‘{{ $this->id }}’)」と書いていた箇所を「@this」と短く書くことができます。
また、「@this」は「”window.livewire.find(‘{{ \$_instance->id }}’)”」となっていましたので、
以前に「$this->id」と書いていた箇所も、本来は「$_instance->id」なのかもしれないと思いました。
↓
私は livewire のソース から追ってしまいましたが、マニュアルの↓この部分にありますね。。。
https://laravel-livewire.com/docs/2.x/inline-scripts#accessing-javascript-component-instance
↓
その後の話です。
無敵と思われた「@this」ですが、
「ディレクティブの中ではディレクティブが使えない」という弱点がありました。
例えば↓下の onApprove の @this は展開されません。

＜livewire:modal name=”modal1″ onApprove=”@this.approve1(Livewire.data())” /＞

その時は↓下のように書きます。

＜livewire:modal name=”modal1″ onApprove=”window.livewire.find(‘{{ \$_instance->id }}’.approve1(Livewire.data())” /＞

また、記述する場所によっては Livewire.find が使えない場面がありました。そこでの対処は、livewire.find と小文字で書けばいけました。

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

@thisディレクティブの定義は↓こちら。vendor/livewire/livewire/src/LivewireBladeDirectives.php

public static function this()
{
    return "window.livewire.find('{{ \$_instance->id }}')";
}

今まで自身のアクションメソッドを呼び出すときは、↓下のように、findを使って呼び出していましたが

<div>
  <button type="button" wire:click="add">add</button>
  <button type="button" onClick="Livewire.find('{{ $this->id }}').debug()">debug</button>
  @for ($i=0; $i<$photos; $i++)
    <livewire:upload :wire:key="$i" name="photo[{{$i}}]" />
  @endfor
</div>

@this だけでいけちゃいます↓↓↓

<div>
  <button type="button" wire:click="add">add</button>
  <button type="button" onClick="@this.debug()">debug</button>
  @for ($i=0; $i<$photos; $i++)
    <livewire:upload :wire:key="$i" name="photo[{{$i}}]" />
  @endfor
</div>

P.S.「$this->id」を「$_instance->id」に置き換えることができることを確認しました。

<div>
  <button type="button" wire:click="add">add</button>
  <button type="button" onClick="Livewire.find('{{ $_instance->id }}').debug()">debug</button>
  @for ($i=0; $i<$photos; $i++)
    <livewire:upload :wire:key="$i" name="photo[{{$i}}]" />
  @endfor
</div>

以上

Scroll to Top