Why livewire data binding is not working? - php

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?

Answer 1

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();
}