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].