livewire 에서 wire:navigate.hover 옵션 사용하면서 alpinejs 컨트롤 하는 방법

Updated on 

<a href="{{ 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"
		wire:navigate.hover>
		{{ $childNavigation->name }}
</a>

위 코드처럼 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 이벤트를 실행시켜서 처리해야 한다.

https://github.com/livewire/livewire/discussions/8495

다른 글