提问者:小点点

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

更新:我刚刚摆脱了

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


共1个答案

匿名用户

一目了然,您似乎需要修复date()函数。Livewire没有钩子。您需要执行更新()更新()

Livewire生命周期挂钩