[英]Why livewire data binding is not working?
我有一個 livewire 組件並嘗試將其用於 CRUD 操作。 大多數功能都可以正常工作,但我無法從 model 加載任何記錄以對其進行編輯。 彈出編輯模態 window 時表單字段為空。
來自組件的片段:
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 */
現在是刀片視圖。
來自記錄表生成代碼的 Sinippet(帶有編輯按鈕):
<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>
我們編輯記錄的模態片段:
<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>
我就是找不到問題出在哪里。 有什么建議么?
正如 Livewire 文檔所說,您必須為要編輯的任何 model 屬性定義規則:
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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.