Livewire @js ディレクティブ とは？

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

Livewire @js ディレクティブ とは？

↓下のURLにある @JSディレクティブ とは何？ということで調査してみました。
https://laravel-livewire.com/docs/2.x/inline-scripts#using-js-directive
ソースでは vendor/livewire/livewire/src/LivewireBladeDirectives.php です。

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

以下のソースは、ボタンを押すと、photo_pathプロパティ をコンソールログに出力するというものです。

<button type="button" id="debug">debug</button>
<script>
//document.getElementById('debug').addEventListener('click',event => console.log(@js($photo_path)))
document.querySelector('#debug').addEventListener('click',event => console.log(@js($photo_path)))
</script>

ボタンを押すと、コンソールログには null が出力されます。

null

scriptタグ は wire:ignore 的な扱いになっているので（私的に）、photo_pathプロパティ を更新しても、初期状態の null が出力されます。そうすると、scriptタグ内の @jsディレクティブ は初期状態の値しか取得できないのかな？と思いました。 scriptタグ に id属性 を与えると反応するようになりますが、これも少し違う気がします。。。

null
storage/mosss.png

↑addEventListener なので、2行出力されます。

以下のように、onClickハンドラ に書けば最新の情報を出力することはできました。

<button type="button" id="debug" onClick="console.log(@js($photo_path))">debug</button>

scriptタグ内 で 最新の @js を扱うにはどうすればいいのか？ここは今後調査していこうと思います。

以上

Scroll to Top