为啥 livewire 数据绑定不起作用？

Posted 2023-02-22

【中文标题】为啥 livewire 数据绑定不起作用？

【英文标题】：Why livewire data binding is not working?为什么 livewire 数据绑定不起作用？

【发布时间】：2021-07-24 05:50:18

【问题描述】：

我有一个 livewire 组件并尝试将其用于 CRUD 操作。大多数功能都可以正常工作，但我无法从模型中加载任何记录以对其进行编辑。弹出编辑模态窗口时，表单字段为空。

来自组件的片段：

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 */

现在是刀片视图。

记录表生成代码的摘要（带有编辑按钮）：

 <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>

我只是找不到问题所在。有什么建议吗？

【问题讨论】：

在同一个刀片视图中是编辑模式吗？

您需要为任何可编辑的模型属性定义规则

【参考方案1】：

正如 Livewire 文档所说，您必须为要编辑的任何模型属性定义规则：

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

【讨论】：

我知道你指的是什么，但包括来源和对你所回答内容的一些实际描述才是一个好的答案

这个答案是正确的。必须声明规则数组，即使在保存/更新期间使用了进一步的验证。感谢 Prospero。