728x90
반응형
라라벨에서 코드를 작성할때 livewire wire:model을 사용할때 실시간으로 input 값이 반영되게끔하고 싶을때가 있습니다.
시중에 있는 강의에서는 wire:model로 변수를 설정하면 다 되는 것 처럼 강의가 설명되어있는데 옛날 버젼이라 그런지 오류가 많았습니다. 하지만 이것저것 찾아보다 overstack에서 결국 해결책을 찾았습니다.
<h1>{{ $post }}</h1> <!-- 변수 출력 시 $post 사용 -->
<p>-----구분 줄--------</p>
<input type="text" wire:model="post">기존 코드는 다음과 같이 설정을 해서 원하는대로 라이브 반영이 실행되지 않았지만,
다음과 .live를 덧 붙이니 실행되었습니다.
<input type="text" wire:model.live="post">
진작에 구글링을 할 걸 그랬습니다.
다음은 간단하게 제가 라이브 와이어로 실습한 코드를 알려드립니다.
먼저 livewire:model, livewire:click, livewire:validation 입니다.
<?php
namespace App\Livewire;
use Livewire\Component;
class Practice extends Component
{
public $post; // 기본값을 여기에 설정할 수 있습니다.
public $clicked = '클릭 이전';
public $name;
public $email;
public $password;
protected $rules = [
'name' => 'required|min:6',
'email' => 'required|email',
'password' => 'required|min:6',
];
protected $messages = [
"name.required" => "이름을 입력해주세요",
"name.min" => "이름은 최소 6자 이상이어야 합니다",
"email.required" => "이메일을 입력해주세요",
];
public function click()
{
$this->clicked = '클릭 이후';
}
public function validation()
{
$this->validate();
}
public function render()
{
return view('livewire.practice',['post' => $this->post]);
}
}<div>
<h1>{{ $post }}</h1> <!-- 변수 출력 시 $post 사용 -->
<p>-----구분 줄--------</p>
<input type="text" wire:model="post">
<!-- <input type="text" wire:model.live="post"> -->
<p>-----구분 줄--------</p>
<h1>{{ $clicked }}</h1>
<button wire:click="click">Click me</button>
<!-- 올바른 wire:click 사용 -->
<p>-----구분 줄--------</p>
<form wire:submit.prevent="validation">
<input type="text" wire:model="name">
@error('name')
<div style="color:red;">{{ $message }}</div>
@enderror
<br/>
<input type="text" wire:model="email">
@error('email')
<div style="color:red;">{{ $message }}</div>
@enderror
<br/>
<input type="password" wire:model="password">
<br/>
<button type="submit">Submit</button>
</form>
</div><!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@vite('resources/css/app.css', 'resources/js/app.js')
@livewireStyles
</head>
<body>
<livewire:livewire/>
@livewireScripts
</body>
</html>
이렇게 livewire:model로 변수를 실시간 반영하거나 click을 통해서 데이터를 업데이트 할 수도 있으며, validation을 통해 값을 검증 할수도 있습니다.
인프런에서 들은 강의를 바탕으로 실습을 한 것 입니다. 부족한 부분은 최신 버젼에 맞춰서 제가 따로 실습을 했습니다.
'BackEnd' 카테고리의 다른 글
| Node.js 및 NPM 호환성 문제 해결하기 : Failed to resolve entry for package "vite". The package may have incorrect main/module/exports specified in its package.json (1) | 2024.10.14 |
|---|---|
| Laravel에서 "Permission denied" 오류 해결하기 (1) | 2024.10.13 |
| Laravel에서 발생한 로그 파일 권한 문제 해결하기 (2) | 2024.10.11 |
| AWS Lightsail 과금: 놓치기 쉬운 부분과 조치 방법 (0) | 2024.10.10 |
| Docker 환경에서 Laravel 프로젝트 권한 문제 해결하기: Artisan 명령 실행 (3) | 2024.10.09 |