Livewire组件的属性未按预期更新

如何解决Livewire组件的属性未按预期更新

问题在于表单的上下文，该表单用于编辑角色的属性，包括通过复选框选择的相关权限。

在加载表单后，根据检索到的角色数据，某些权限的复选框会按预期显示为选中状态。可以选择和取消选择空的复选框，并且更改会反映在浏览器的请求有效负载预览数组上，尽管添加的新值在数组上显示为字符串，如您所见：

role_permissions: [1,2,3,4,5,"6"]

但是，这就是问题所在，当取消选择加载表单时默认选中的复选框时，它们的行为很奇怪，不允许取消选中多个复选框，并且浏览器的请求有效负载预览上的数组根本无法更新

Laravel视图：

<div class="card-body">
    <livewire:roles.form-edit :role="$role" />
</div>

Livewire控制器：

class FormEdit extends Component
{
    public $role;
    public $name;
    public $permissions;
    public $role_permissions;
    public $notes;

    public function mount($role)
    {
        $this->role = $role;
        $this->name = $role->name;
        $this->permissions = Permission::all();
        $this->role_permissions = $role->permissions()->pluck('id')->toArray();
        $this->notes = $role->notes;
    }

    public function update()
    {
        $role_data = $this->validate([
            'name' => ['required','string','min:1','max:255',Rule::unique('roles')->ignore($this->role->id)],'permissions' => 'nullable','notes' => 'nullable',]);

        $this->role->update([
            'name' => $role_data['name'],'notes' => $role_data['notes'],]);

        $this->role->permissions()->sync($this->role_permissions);

        session()->flash('success_message',"Rol actualizado correctamente.");

        return redirect()->route('backend.roles.role.index');
    }

    public function render()
    {
        return view('livewire.roles.form-edit');
    }
}

Livewire视图：

<form wire:submit.prevent="update" accept-charset="UTF-8" id="edit_role_form" class="form-horizontal">

    <x-input.text label="Name" attribute="name" />

    <x-input.checkboxes label="Permissions" attribute="role_permissions" :options="$permissions" :entity-options="$role_permissions" />

    <x-input.textarea label="Notes" attribute="notes" />

    <x-input.submit label="Save" />

</form>

Laravel组件视图：

@props([
    'label','attribute','options','entityOptions'
])

<div class="form-group row">
    <label for="{{ $attribute }}" class="col-md-3 control-label">{{ __($label) }}</label>
    <div class="col-md-9">
        <ul class="list-unstyled row checkboxes-list">
            <?php $counter = 0 ?>
            @foreach($options as $option)
                @if($counter == 0)
                    <div class="col-lg-4 checkboxes-list-bottom-divider">
                @elseif($counter != 0 && $counter % 5 == 0)
                    </div>
                    <div class="col-lg-4 checkboxes-list-bottom-divider">
                @endif
                <li>
                    <label>
                        <input wire:model="{{ $attribute }}" {{ $attributes }} type="checkbox" value="{{ $option->id }}" placeholder="" {{ (in_array($option->id,$entityOptions)) ? 'checked' : '' }}> {{ $option->label }}
                    </label>
                </li>
                <?php $counter++ ?>
            @endforeach
            </div>
        </ul>
    </div>
</div>

Laravel版本：^ 7.0

Livewire版本：^ 1.3

更新：我只是摆脱了 Laravel组件视图，并重构了Livewire视图中的所有相关代码，但是它也不起作用。行为相同。目前，我对Livewire感到困惑。

已解决。我仍然爱上Livewire。我真的不想学习Javascript框架。

解决方法

乍一看，您似乎需要修复 update() 函数。 Livewire 没有挂钩。您需要执行 updating() 或 updated()

Livewire Lifecycle Hooks