Why livewire data binding is not working?

Question

I have a livewire component and try to use it for CRUD operations. Most of the functionality works fine, but I can't load any record from the model in order to edit it. The form fields are empty when editing modal window pops up.

Snippet from component:

namespace App\Http\Livewire;
 
use Livewire\Component;
use App\Models\Pais;
use Livewire\WithPagination;
 
class Paises extends Component
{
    use WithPagination;
 
    public $active;
    public $q;
    public $sortBy = 'id';
    public $sortAsc = true;
    public $pais;
    
 
    public $confirmingPaisDeletion = false;
    public $confirmingPaisAdd = false;
    
/* More code here but not relevant *********/
 
    public function render()
    {
        $paises = Pais::select('id', 'pais','codiso2', 'codiso3', 'estatus')
            ->when( $this->q, function($query) {
                return $query->where(function( $query) {
                    $query->where('pais', 'like', '%'.$this->q . '%')
                        ->orWhere('codiso2', 'like', '%' . $this->q . '%')
                        ->orWhere('codiso3', 'like', '%' . $this->q . '%');

                });
            })
            ->when($this->active, function( $query) {
                return $query->active();
            })
            ->orderBy($this->sortBy, $this->sortAsc ? 'ASC' : 'DESC');
 
        $paises = $paises->paginate(10);
 
        return view('livewire.paises', [
            'paises' => $paises,
        ]);
    }
 
    public function updatingActive() 
    {
        $this->resetPage();
    }
 
    public function updatingQ() 
    {
        $this->resetPage();
    }
    
    public function sortBy( $field) 
    {
        if( $field == $this->sortBy) {
            $this->sortAsc = !$this->sortAsc;
        }
        $this->sortBy = $field;
    }
 
    public function confirmPaisDeletion( $id) 
    {
        $this->confirmingPaisDeletion = $id;
    }
 
    public function deletePais( Pais $pais) 
    {
        $pais->delete();
        $this->confirmingPaisDeletion = false;
        session()->flash('message', 'País eliminado correctamente');
    }
 
    public function confirmPaisAdd() 
    {
        $this->reset(['pais']);
        $this->confirmingPaisAdd = true;
    }
 
    public function confirmPaisEdit(Pais $pais) 
    {
        $this->resetErrorBag();
        $this->pais = $pais;
        $this->confirmingPaisAdd = true;
    }

 /* More code here but not relevant */

Now the blade view.

Sinippet from record table generation code (with edit button):

 <tbody>
                @foreach($paises as $pais)
                    <tr>
                        <td class="border px-4 py-2">{{ $pais->id}}</td>
                        <td class="border px-4 py-2">{{ $pais->pais}}</td>
                        <td class="border px-4 py-2">{{ $pais->codiso2}}</td>
                        <td class="border px-4 py-2">{{ $pais->codiso3}}</td>
                        @if(!$active)
                            <td class="border px-4 py-2">{{ $pais->estatus ? 'Activo' : 'Inactivo'}}</td>
                        @endif
                        <td class="border px-4 py-2">
                        <x-jet-button wire:click="confirmPaisEdit( {{ $pais->id}})" class="bg-orange-500 hover:bg-orange-700">
                            {{ __('Editar') }}
                        </x-jet-button>
                            <x-jet-danger-button wire:click="confirmPaisDeletion( {{ $pais->id}})" wire:loading.attr="disabled">
                            {{ __('Borrar') }}
                            </x-jet-danger-button>
                        </td>
                    </tr>
                @endforeach
            </tbody>

Snippet from modal where we edit the record:

<x-jet-dialog-modal wire:model="confirmingPaisAdd">
        <x-slot name="title">
            {{ isset( $this->pais->id) ? 'Editar país' : 'Agregar país'}}
        </x-slot>
 
        <x-slot name="content">
            <div class="col-span-6 sm:col-span-4">
                <x-jet-label for="pais" value="{{ __('País') }}" />
                <x-jet-input id="pais" type="text" class="mt-1 block w-full" wire:model.defer="pais.pais" />
                <x-jet-input-error for="pais.pais" class="mt-2" />
            </div>
 
            <div class="col-span-6 sm:col-span-4 mt-4">
                <x-jet-label for="codiso2" value="{{ __('Código ISO 2') }}" />
                <x-jet-input id="codiso2" type="text" class="mt-1 block w-full" wire:model.defer="pais.codiso2" />
                <x-jet-input-error for="pais.codiso2" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-4 mt-4">
                <x-jet-label for="codiso3" value="{{ __('Código ISO 3') }}" />
                <x-jet-input id="codiso3" type="text" class="mt-1 block w-full" wire:model.defer="pais.codiso3" />
                <x-jet-input-error for="pais.codiso3" class="mt-2" />
            </div>
            
            <div class="col-span-6 sm:col-span-4 mt-4">
                <label class="flex items-center">
                    <input type="checkbox" wire:model.defer="pais.estatus" class="form-checkbox" />
                    <span class="ml-2 text-sm text-gray-600">{{ __('Activo') }}</span>
                </label>
            </div>
        </x-slot>

I just can't find where the problem is. Any suggestions?

You need to define rules for any model attribute that can be edited — Qirel

Prospero Prospero · Accepted Answer · 2021-05-01T01:09:06

as the Livewire documentation said, you must define rules for any model attribute to be edited:

public Pais $pais;

protected $rules = [
   'pais.pais' => 'required',
   'pais.codiso2' => 'required', 
   'pais.codiso3' => 'required', 
   'pais.estatus' => 'required'
];

//.....

public function confirmPaisEdit($id) 
{
   $this->resetErrorBag();
   $this->pais = Pais::find($id);
   $this->confirmingPaisAdd = true;
}

public function save()
{
   $this->validate();
   $this->pais->save();
}

Why livewire data binding is not working?

1 Answers