첫번째 시나리오.

1. livewire 컴포넌트를 만든다.
2. input name 과 컴포넌트 변수명을 일치시킨다. wire:model
3. 클릭 이벤트를 실행시킨다. wire:click
4. 컴포넌트에서 함수를 실행시킨다.
5. css 의 hidden, disabled 와 연동이 가능하다.

livewire Component

1# views/test/livewire/counter.blade.php
2# blade 파일에 적용방법
3 
4<div class="mx-auto text-center">
5    <livewire:test.counter />
6</div>

livewire Component

 1# app/http/Livewire/Test/Counter.php
 2 
 3namespace App\Http\Livewire\Test;
 4 
 5use Livewire\Component;
 6 
 7class Counter extends Component
 8{
 9 
10    // 속성
11    public $count = 0;
12 
13    // 랜더링
14    public function render() {
15        return view('livewire.test.counter');
16    }
17 
18    public function increment() {
19        $this->count++;
20    }
21 
22    function decrement() {
23        $this->count--;
24    }
25}

views

livewire 와 alpine 비교하기

 1# views/livewire/test/counter.blade.php
 2 
 3<div>
 4    <h1>Counter Sample : only livewire</h1>
 5 
 6    <h1>
 7        {{ $count }}
 8    </h1>
 9 
10 
11    <button wire:click='decrement'>감소하기</button>
12    <button wire:click='increment'>증가하기</button>
13 
14</div>

 1# views/livewire/test/counter.blade.php
 2// view 파일에서 동시에 적용해 봤는데.. 안된다. livewire 이든, apline 이든 하나만 사용해야 함.
 3// 동시에 적용하기 위해서는 @entangle() 을 사용해야 한다.
 4 
 5# views/livewire/test/counter.blade.php
 6 
 7<div>
 8<h1>Counter Sample : alpinejs </h1>
 9 
10<div x-data>
11    <h1 x-text="$wire.count"></h1>
12 
13    <button @click="$wire.decrement">감소하기</button>
14    <button @click="$wire.increment">증가하기</button>
15</div>
16</div>

다음과 같이 코드를 변경하면 동시에 작동한다. @entangle('count')

 1<div>
 2    <h1>Counter Sample : only livewire</h1>
 3 
 4    <h1>
 5        {{ $count }}
 6    </h1>
 7 
 8 
 9    <button wire:click='decrement'>감소하기</button>
10    <button wire:click='increment'>증가하기</button>
11 
12    <div x-data="{count : @entangle('count')}">
13 
14        <h1 x-text="$wire.count"></h1>
15        <h1 x-text="count"></h1>
16 
17        <button @click="count--">감소하기 (count--)</button>
18        <button @click="count++">증가하기 (count++)</button>
19 
20        <br><br>
21 
22        <button @click="$wire.decrement">감소하기($wire.decrement)</button>
23        <button @click="$wire.increment">증가하기($wire.increment)</button>
24 
25    </div>
26 
27</div>