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

1. 구성요소 추가

php artisan livewire:make Counter

CLASS: app/Http/Livewire/Counter.php

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

2. app/Http/Livewire/Counter.php

<?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');
    }
}
 

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>