섹션8 wire:model 실시간 적용 안됨 문의...

PHP 개발자의 최종 테크트리, 라라벨 강의

wire:model, wire:click, wire:submit.prevent 등의 코드 동작 순서를 구현하며 순서를 이해합니다.

작성

안녕하세요 강사님! 현재 라이브와이어 실습중인데 wire:model로 input태그와 컴포넌트의 변수 $post를 엮어주고 실시간으로 변경하게 하는 예제가 동작하지 않아 문의드립니다...

resources/views/welcome.blade.php

<!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:welcome :post="'텍스트 입력'"/>
        @livewireScripts
    </body>
</html>

app/ Livewire/Welcome.php

<?php

namespace App\Livewire;

use Livewire\Component;

class Welcome extends Component
{
    public $post;
    public function render()
    {
        return view('livewire.welcome',["post" => $this->post]);
    }
}

resources/views/livewire/welcome.blade.php

<div>
    <h1>{{ $post }}</h1>
    <p>----------------구분줄----------------</p>
    <input type="text" wire:model="post">
</div>

일단 여기까지 했을 때 h1태그와 input태그에 동일하게 "텍스트 입력"이라고 표기되는 것까진 확인하였는데 이후 input태그 안의 택스트를 수정하면 h1태그에 반영이 안됩니다;; 혹시나해서 livewire도 재설치 해봤으나 동일해서 질문드립니다...ㅠㅠ

php Laravel

답변 2

베르베릉

질문자

방법을 찾았습니다! 인프런 Ai인턴의 답변을 참고하여 이것저것 실행해보다가 마지막의 livewire 설치시 2.0 지정하여 설치해야 한다는 글을 보고 해당 문제가 livewire의 버전 차이 때문임을 알았습니다!

하지만 일단 새로운 버전이 나오기도 했고 다운그레이드 하면 일단 문제는 쉽게 해결 되겠지만 뭣 때문인지 이유라도 알자 싶어 검색했고 아래 글을 찾았습니다

https://velog.io/@eojin/Livewire-2-3-%EB%B2%84%EC%A0%84%EC%97%85-%ED%9B%84%EA%B8%B0

중간에 보면 모델 바인딩 기본 행동이 live에서 defer로 바뀌었다는 이야기가 나오는데, 즉 디폴트로 defer라면 설정을 live로 바꿔주면 되는거 아니겠습니까!! 그래서 wire:model뒤에 .live를 붙여주었고 문제가 해결되었습니다!!!

<div>
    <h1>{{ $post }}</h1>
    <p>----------------구분줄----------------</p>
    <input type="text" wire:model.live="post">
</div>

백승철

지식공유자

제가 답변을 드리기도 전에 스스로 찾으셨군요 ㅠㅠ 해당 강의는 라라벨 9 때를 고려해 만들어진 버전이다 보니, 라이브와이어 또한 2버전을 기준으로 설명되어 있습니다. 현재는 3버전이 나왔으며 말씀주신것처럼 wire:model 사용법이 세분화 되어서 대부분은 .live를 붙여주시면 해결 됩니다. 라이브 와이어에 관한 내용은 현재는 많이 변화되었으니 참고해주시는 정도로만 생각해 주시면 될 것 같습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 베르베릉님.

라라벨의 라이브와이어로 실시간 데이터 바인딩이 안되는 문제를 겪고 계신 것 같습니다. 이 문제는 여러 원인으로 발생할 수 있는데요, 몇 가지 체크해보실 수 있는 사항을 안내드립니다.

라이브와이어의 스크립트가 제대로 로드 되었는지 확인이 필요합니다.
@livewireScripts가 포함된 부분이 <body> 태그의 닫히기 직전에 잘 추가되어 있는 것처럼 보입니다. 이 부분이 문제없다면, 브라우저의 개발자 도구를 실행한 뒤 콘솔(errors 탭)에서 라이브와이어와 관련된 오류 메세지가 있는지 확인해 보세요.
라이브와이어가 최신 버전인지 확인합니다.
라이브와이어의 최신 버전으로 업그레이드하여 개선된 기능과 문제해결을 반영할 수 있습니다. composer로 업데이트한 후 php artisan optimize 명령어를 통해 캐시를 비워주세요.
스크립트 및 스타일 충돌 문제를 확인합니다.
주의하실 점은, 자바스크립트와 스타일에서 충돌이 있을 수 있습니다. 이를 확인하기 위해 임시로 추가된 모든 자바스크립트와 스타일을 주석 처리하고 문제가 여전히 존재하는지를 테스트해보실 수 있습니다.
컴포넌트의 네이밍 규칙을 확인합니다.
컴포넌트 클래스와 뷰 파일 이름이 일치하는지, 규칙에 맞게 작성되었는지 확인이 필요합니다.

이와 관련된 선행 질문으로는 다음 질문이 있어 참조하시면 도움이 될 것 같습니다:
- livewire를 composer 설치 시 2.0 지정해서 설치해야 할 것 같습니다.

위 방법으로도 해결되지 않는다면, 콘솔에서 나온 에러 로그를 참고해 추가적인 힌트를 얻어보시고, 그래도 해결이 되지 않으면 다시 한번 문의해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

섹션8 wire:model 실시간 적용 안됨 문의...