livewire 에서 wire:navigate.hover 옵션 사용하면서 alpinejs 컨트롤 하는 방법
Livewire의 `wire:navigate.hover` 대신 `@click.prevent`를 사용해 Alpine.js 컴포넌트를 제어하는 방법을 설명했습니다. 이 방법으로 원활한 네비게이션을 경험해보세요.
GGAMI
<a href="{{ route($childNavigation->Livewire의 `wire:navigate.hover` 대신 `@click.prevent`를 사용해 Alpine.js 컴포넌트를 제어하는 방법을 설명했습니다. 이 방법으로 원활한 네비게이션을 경험해보세요.
<a href="{{ route($childNavigation->위 코드처럼 livewire 에서 wire:navigate.hover 기능을 사용하는 경우가 많다.
그런데 이때 사용하면서, alpinejs component 의 data를 컨트롤 해야할때가 있는데. @click= 이벤트로는 컨트롤이 될때가 있고 안될때가 있다.
그 이유는 @click 이벤트 액션이 일어나기 전에 이미 href 로 이동하기 때문이다.
이 문제를 해결하려면,
<a href="{{ route($childNavigation->route) }}"
@click.prevent="$store.navigation.toggleMobileMenu(); Livewire.navigate('{{ route($childNavigation->route) }}')"
class="block rounded-md py-2 pl-5 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">
{{ $childNavigation->name }}
</a>이런식으로 사용해줘야 한다.
wire:navigate.hover 옵션은 제거하고, @click.prevent 이벤트를 실행시켜서 처리해야 한다.