라라벨/livewire_study

라라벨 와이어 동작방법 버튼 카운터

땀모 2020. 4. 11. 21:13

1. 구성요소 추가

1
php artisan livewire:make Counter
cs


CLASS: app/Http/Livewire/Counter.php

VIEW:  resources/views/livewire/counter.blade.php


2. app/Http/Livewire/Counter.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $counter;
 
    public function increment()
    {
        $this->counter++;
    }
 
    public function decrement()
    {
        $this->counter--;
    }
 
    public function mount()
    {
        $this->counter = 0;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}
 
cs


3. 디자인과 버튼에 메서드를 설정해준다. 

<div>
<p>{{ $counter }}</p>
<button wire:click="increment">+</button> | <button wire:click="decrement">-</button>
</div>


4. welcome.blade.php 파일에 주입해준다.

@livewire('counter')



5. input 박스에 더하기나 빼기 값을 넣어 줄 수 있음

<div>
<p>{{ $counter }}</p>
<p><input type="text" wire:model.lazy="step" ></p>
<button wire:click="increment">+</button> | <button wire:click="decrement">-</button>
</div>


6. Counter.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
public $counter;

public $step;

public function increment()
{
$this->counter += $this->step;
}

public function decrement()
{
$this->counter -= $this->step;
}

public function mount()
{
$this->counter = 0;
$this->step = 1;
}

public function render()
{
return view('livewire.counter');
}
}


7. 키보드를 사용하게 할 수 도 있음

<div>
<p>{{ $counter }}</p>
<p><input
wire:keydown.arrow-up="increment"
wire:keydown.arrow-down="decrement"
type="text"
wire:model.lazy="step" ></p>

<button wire:click="increment">+</button> | <button wire:click="decrement">-</button>
</div>



저작자표시