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

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

言語
バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる