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

问题描述

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

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

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

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

Laravel 视图：

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

活线控制器：

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

实时线视图：

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

<x-input.checkboxes /> 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

更新：我只是摆脱了 <x-input.checkboxes /> Laravel 组件视图并重构了 Livewire 视图中的所有相关代码，但它也不起作用。相同的行为。我在这一点上被 Livewire 困住了。

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

标签： laravellaravel-livewire

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

问题描述

解决方案

推荐阅读