Livewire 2.x インラインスクリプト

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])"としてコンパイルされます。