Livewire not updating my field

Hey guys! So im using laravel 10 with jetstream (im still on my firts steps in the developing world) and everything was working fine. I tried to create an input tag inside a form that could get updated with livewire so i did this in my view: @foreach($course->sections as $item)

    <article class="card mb-6">
        <div class="card-body bg-gray-100">

            @if($section->id == $item->id)
                <form>
                    <input wire:model="section.name" class="form-input w-full" placeholder="Ingrese el nombre de la sección">
                </form>

            @else
                <header class="flex justify-between items-center">
                    <h1 class="cursor-pointer"><strong>Seccion:</strong>{{ $item->name }}</h1>
                    <div>
                        <i class="fas fa-edit cursor-pointer text-blue-500" wire:click="edit({{ $item }})"></i>
                        <i class="fas fa-eraser cursor-pointer text-red-500"></i>
                    </div>
                </header>
            @endif

        </div>
    </article>

@endforeach

and did this in my component:

class CoursesCurriculum extends Component{

public $course, $section;

protected $rules = [
    'section.name' => 'required'
];

public function mount(Course $course){
    $this->course = $course;
    $this->section = new Section();
}

public function render()
{
    return view('livewire.instructor.courses-curriculum')->layout('layouts.instructor');
}

public function edit(Section $section)
{
    $this->section = $section;
}

} But for some reason the input on my form does not get updated with the value of $section. I checked the console and i got an erorr (This is part of it):

Uncaught TypeError: carry is null dataGetcurso.test/livewire/livewire.js?id=2f6e5d4d:347 dataGetcurso.test/livewire/livewire.js?id=2f6e5d4d:344 get curso.test/livewire/livewire.js?id=2f6e5d4d:7530 getValue curso.test/livewire/livewire.js?id=2f6e5d4d:3288 ... livewire.js:347:7

I dont really know if irs related to my problem or not. I was thinking about re-installing livewire or something. What do you guys think? Thanks.

WadeShuler

2 years ago

Best Answer

Level 1

First thing to know is that Livewire v3 does not support object properties in your blade files. If it was working and now isn't, it may be you were initially on Livewire v2 and a composer update brought you to v3? I experienced this myself. I think I had a package that was holding me back on 2, then it updated and all of a sudden allowed v3 and boom my forms weren't working.

So you could just define a property for each item you need in your component. ie:

public $name;

public $email;

public $city;

public $state;

I strongly recommend just going straight into using Form components. By using form components, you can retain live validation on trickier validations where you need to use the rules() method. Form Component docs

In order to have live validation, you need to use the #[Rule] attribute above your properties. If it's more complicated and you need to define it in a rules method, you can define an empty rule attribute as #[Rule('')] and it will merge with the rules() method. Then you need to use wire:model.live in your blade.

I know you weren't specifically asking about "live validation", just mentioning it while we are here.

So first, refactor to use Form components and post back here if you still need help.

PS: Make sure you do 3 ticks before your code, and after it, on it's own line, so it will be formatted properly. Your first and last lines of your code examples are messed up.

2 likes

Snapey

2 years ago

Level 122

you cant pass the whole model to the edit function

wire:click="edit({{ $item }})"></i>

nor should you need to. Pass just the id and do the work in the controller

1 like

abdallahalsamman

2 years ago

Level 2

Found solution here

https://github.com/livewire/livewire/discussions/6301#discussioncomment-6829066

you can't bind to Eloquent Models in V3 unless you set legacy_model_binding to true. But we don't recommend using model binding, instead you should use FormObjects.

Please or to participate in this conversation.