Livewire v3 wire:current

wire:current

wire:current ディレクティブを使用すると、ページ上の現在アクティブなリンクを簡単に検出してスタイルを設定できます。The wire:current directive allows you to easily detect and style currently active links on a page.

wire:current をナビゲーションバーのリンクに追加して、現在アクティブなリンクのフォントウェイトを強くする簡単な例を次に示します。Here's a simple example of adding wire:current to links in a navbar so that the currently active link has a stronger font weight:

<nav>
    <a href="/dashboard" ... wire:current="font-bold text-zinc-800">Dashboard</a>
    <a href="/posts" ... wire:current="font-bold text-zinc-800">Posts</a>
    <a href="/users" ... wire:current="font-bold text-zinc-800">Users</a>
</nav>

これで、ユーザーが /posts にアクセスすると、"Posts" リンクは他のリンクよりも強いフォントで表示されます。Now when a user visits /posts, the "Posts" link will have a stronger font treatment than the other links.

wire:current は、wire:navigate リンクとページの変更でそのまま動作することに注意してください。You should note that wire:current works out of the box with wire:navigate links and page changes.

完全一致Exact matching

デフォルトでは、wire:current は部分一致戦略を使用します。つまり、リンクと現在のページが URL のパスの先頭部分を共有している場合に適用されます。By default, wire:current uses a partial matching strategy, meaning it will be applied if the link and current page share the beginning portion of the Url's path.

たとえば、リンクが /posts で、現在のページが /posts/1 の場合、wire:current ディレクティブが適用されます。For example, if the link is /posts, and the current page is /posts/1, the wire:current directive will be applied.

完全一致を使用する場合は、.exact 修飾子をディレクティブに追加できます。If you wish to use exact matching, you can add the .exact modifier to the directive.

ユーザーが /posts にアクセスしたときに "Dashboard" リンクが強調表示されないようにするために、完全一致を使用する例を次に示します。Here's an example where you might want to use exact matching to prevent the "Dashboard" link from being highlighted when the user visits /posts:

<nav>
    <a href="/" wire:current.exact="font-bold">Dashboard</a>
</nav>

厳密な一致Strict matching

デフォルトでは、wire:current は比較から末尾のスラッシュ (/) を削除します。By default, wire:current will remove trailing slashes (/) from its comparison.

この動作を無効にして、厳密なパス文字列の比較を強制する場合は、.strict 修飾子を追加できます。If you'd like to disable this behavior and force a stract path string comparison, you can append the .strict modifier:

<nav>
    <a href="/posts/" wire:current.strict="font-bold">Dashboard</a>
</nav>

トラブルシューティングTroubleshooting

wire:current が現在のリンクを正しく検出しない場合は、以下を確認してください。If wire:current is not detecting the current link correctly, ensure the following:

• ページに少なくとも 1 つの Livewire コンポーネントがあるか、レイアウトに @livewireScripts をハードコードしていることYou have at least one Livewire component on the page, or have hardcoded @livewireScripts in your layout
• リンクに href 属性があることYou have a href attribute on the link.