Livewireは、JavaScriptのほとんどのニーズにAlpineJSを使用することをおすすめしますが、コンポーネントのビュー内で直接 <script>
タグを使用するサポートもしています。
<div>
<!-- コンポーネントのHTML -->
<script>
document.addEventListener('livewire:load', function () {
// ここにJS
})
</script>
</div>
Note: スクリプトは、コンポーネントの最初のレンダリング時に1回だけ実行されることに注意してください。後でJavaScript関数を実行する必要がある場合は、コンポーネントからイベントを発行し、ここで説明されているようにJavaScriptでリッスンします。
LivewireコンポーネントからBladeスタックにスクリプトを直接プッシュすることもできます。
<!-- コンポーネントのビュー -->
@push('scripts')
<script>
// ここにJS
</script>
@endpush
JavaScriptコンポーネントインスタンスへのアクセス
LivewireにはPHPとJavaScriptの両方のパートがあるため、各コンポーネントにもJavaScriptオブジェクトがあります。コンポーネントのビューで特別な @this
Bladeディレクティブを使用して、このオブジェクトにアクセスできます。
例をご覧ください。
<script>
document.addEventListener('livewire:load', function () {
// "count"プロパティの値を取得
var someValue = @this.count
// "count"プロパティの値を設定
@this.count = 5
// incrementコンポーネントアクションを呼び出す
@this.increment()
// このコンポーネントからイベント("foo")が発行されたときに、コールバックを実行
@this.on('foo', () => {})
})
</script>
Note:
@this
ディレクティブは、JavaScriptが解釈するために"Livewire.find([component-id])"としてコンパイルされます。