Livewire3와 Alpinejs 상호작용에 대해서.

Livewire는
HTML 코드에서는 wire: 로 시작한다. 
Alpine.js 에서는 매직 키워드를 사용한다. $wire.

JavaScript 에서는 Livewire. 를 사용한다.

 

Alpinejs 는 프론트앤드 자바스크립트다.

Livewire 는 서버에서 동작한다.

 

프론트앤드의 이벤트는 Alpinejs 에서 컨트롤 할 수 있다.

x-on:click="" 을 통해서 이벤트를 발생시킬 수 있다.

 

Livewire 에서는 wire:click="" 으로 이벤트를 발생시킬 수 있으나, 서버를 한번 갔다가 와야 한다.

 

질문1)

Alpinejs 에서는 Livewire 의 함수를 실행시킬 수 있나?

    <h1>Alpine.js</h1>
    <div x-data="{ count: $wire.count }">
        <h2 x-text="count"></h2>
        <button x-on:click="count++" wire:click='increment'>+</button>
        <button x-on:click="count--" wire:click="decrement">-</button>
        <hr>
        <button x-on:click="@this.call('increment')">+</button>
        <button x-on:click="@this.call('decrement')">-</button>
    </div>

 

질문2)

Livewire 에서는 Alpinejs의 함수를 실행시킬 수 있나?

    public function triggerAlpine()
    {
        $this->dispatch('alpine-event');
    }

 

    <div x-data="{ open: false }">
        <!-- Alpine.js listens for the 'alpine-event' -->
        <div x-on:alpine-event.window="open = !open">
            <!-- Content that toggles visibility -->
            <div x-show="open">
                I am toggled by Livewire!
            </div>
        </div>
    
        <!-- Button to trigger Livewire method -->
        <button wire:click="triggerAlpine">Toggle Visibility</button>
    </div>

 

HTML 문서에서는 wire:click
Alpinejs 에서는 $wire. 으로 사용한다.