Readouble

Livewire v3 wire:click

wire:click

Livewireは、ユーザーがページ上の特定の要素をクリックしたときに、コンポーネントメソッド(別名アクション)を呼び出すためのシンプルな wire:click ディレクティブを提供します。Livewire provides a simple wire:click directive for calling component methods (aka actions) when a user clicks a specific element on the page.

たとえば、以下の ShowInvoice コンポーネントがあるとします。For example, given the ShowInvoice component below:

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Invoice;

class ShowInvoice extends Component
{
    public Invoice $invoice;

    public function download()
    {
        return response()->download(
            $this->invoice->file_path, 'invoice.pdf'
        );
    }
}

ユーザーが「Download Invoice」ボタンをクリックしたときに、上記のクラスの download() メソッドをトリガーするには、wire:click="download" を追加します。You can trigger the download() method from the class above when a user clicks a "Download Invoice" button by adding wire:click="download":

<button type="button" wire:click="download"> <!-- [tl! highlight] -->
    Download Invoice
</button>

wire:click をリンクで使用する場合Using wire:click on links

<a> タグで wire:click を使用する場合は、ブラウザでのリンクのデフォルトの処理を防止するために、.prevent を追加する必要があります。そうしないと、ブラウザは指定されたリンクにアクセスし、ページのURLを更新します。When using wire:click on <a> tags, you must append .prevent to prevent the default handling of a link in the browser. Otherwise, the browser will visit the provided link and update the page's URL.

<a href="#" wire:click.prevent="...">

さらに深く掘り下げるGoing deeper

wire:click ディレクティブは、Livewireで使用可能なさまざまなイベントリスナの1つにすぎません。その(および他のイベントリスナの)機能に関する完全なドキュメントについては、Livewire actions documentation pageをご覧ください。The wire:click directive is just one of many different available event listeners in Livewire. For full documentation on its (and other event listeners) capabilities, visit the Livewire actions documentation page[/docs/actions].

章選択

パッケージ

設定

バージョン変更
linkv3 linkv2
明暗テーマ
light_mode
dark_mode
brightness_auto システム設定に合わせる
テーマ選択
photo_size_select_actual デフォルト
photo_size_select_actual モノクローム(白黒)
photo_size_select_actual Solarized風
photo_size_select_actual GitHub風(青ベース)
photo_size_select_actual Viva(黄緑ベース)
photo_size_select_actual Happy(紫ベース)
photo_size_select_actual Mint(緑ベース)
コードハイライトテーマ選択

明暗テーマごとに、コードハイライトのテーマを指定できます。

テーマ配色確認
スクリーン表示幅
640px
80%
90%
100%

768px以上の幅があるときのドキュメント部分表示幅です。

インデント
無し
1rem
2rem
3rem
原文確認
原文を全行表示
原文を一行ずつ表示
使用しない

※ 段落末のEボタンへカーソルオンで原文をPopupします。

Diff表示形式
色分けのみで区別
行頭の±で区別
削除線と追記で区別

※ [tl!…]形式の挿入削除行の表示形式です。

テストコード表示
両コード表示
Pestのみ表示
PHPUnitのみ表示
OS表示
全OS表示
macOSのみ表示
windowsのみ表示
linuxのみ表示
JSフレームワーク
両フレームワーク
Reactのみ表示
Vueのみ表示
JSのみ表示

(JSが存在しない場合は、他を全表示)

和文変換

対象文字列と置換文字列を半角スペースで区切ってください。(最大5組各10文字まで)

本文フォント

総称名以外はCSSと同様に、"〜"でエスケープしてください。

コードフォント

総称名以外はCSSと同様に、"〜"でエスケープしてください。

保存内容リセット

localStrageに保存してある設定項目をすべて削除し、デフォルト状態へ戻します。

ヘッダー項目移動

キーボード操作