Livewire Magic Actions

Events

 1 
 21. 버튼을 클릭했을때 livewire component method 가 실행되게 할려면.
 3 
 4<button wire:click="doSomething( {{$todo->id}}, '{{$todo->name }}')">클릭</button>
 5<button wire:keydown.enter='doSomething'>keydown</button>
 6<button wire:submit.prevent='doSomething'>submit</button>
 7 
 8 
 92. 버튼을 클릭했으때 여러개의 livewire 컴포넌트가 동시에 동작하게 할려면?
10 
11    1) blade 에서
12    <button wire:click='$emit("postAdded")'>동시에 일어나라.</button>
13 
14    2) component 에서
15    $this->emit('postAdded');
16 
17    3) Javascript 에서
18    <script>
19            Livewire.emit('postAdded');
20    </script>
21 
22 
23    # 컴포넌트 속성과 함수 설정
24 
25    protected $listeners = ['postAdded' => 'incrementPostCount'];
26 
27    public function incrementPostCount()
28    {
29        $this->postCount = Post::count();
30    }
31 
32 
333. 이벤트에 변수 넘겨주기
34$this->emit('postAdded', $post->id);
35 
364. 특정한 컴포넌트에서만 이벤트가 실행되게 할려면?
37 
38    1) 부모 컴포넌트에서만 실행되도록
39    $this->emitUp();
40    <button wire:click='$emitUp("postAdded")'>클릭</button>
41 
42    2) 컴포넌트 이름을 직접 지정하기
43    $this->emitTo('counter','postAdded');
44    <button wire:click='$emitTo("counter","postAdded")'></button>
45 
46    3) 자신의 이벤트만 실행되도록 하기
47    $this->emitSelf('postAdded');
48    <button wire:click='$emitSelf("postAdded")'></button>

Magic Actions

 1 
 2$refresh
 3 
 4$set(property, value)
 5 
 6<div>
 7    {{ $message }}
 8    <button wire:click="$set('message', 'Hello')">Say Hi</button>
 9</div>
10 
11$toggle('property')
12 
13$emit('event',..params)