laravel Livewire中复选框的不可理解行为

ddhy6vgd  于 2023-03-09  发布在  其他
关注(0)|答案(1)|浏览(103)

所选复选框的复选框在页面加载时会正确显示几分之一秒,但在呈现结束时会消失。如果删除wire:model,复选框将始终按预期正确显示。请帮助我了解此行为的原因?
我的Livewire控制器

public $allProperties;
public $filterProperties;
public $currentGroupFilter;

public function updatedFilterProperties(){

    if ($this->filterProperties){

        if (isset($this->currentGroupFilter)){
            session([
                    'filterScope-'.$this->currentGroupId() => $this->currentGroupFilter + array_filter($this->filterProperties),
                    ]);
        } else {
            session([
                    'filterScope-'.$this->currentGroupId() => array_filter($this->filterProperties),
                ]);
        }
    }
}

public function mount($parentGroup)
{
    
    $this->allProperties = $this->getProperties($this->productsId);

    if (session('filterScope-'.$this->currentGroupId())){
        $this->currentGroupFilter = session('filterScope-'.$this->currentGroupId());
//      $this->currentGroupFilter = array_map(fn($g) => ($g == true),$this->currentGroupFilter,);
        $this->updatedFilterProperties();
    }
}

我的剑

@foreach($allProperties  as $property)
    <div x-data="{ open: true }" class="border border-silver border-md p-2">
        <button @click="open = !open">{{$property->name}}</button>
        <ul x-show="open">
            @foreach($property->values()->wherePivotIn('product_id', $productsId)->get()->unique() as $propertyValue)
                <li>
                        <input wire:model="filterProperties.{{$propertyValue->id}}"
                               @if($currentGroupFilter)
                                   @checked(array_key_exists($propertyValue->id,$currentGroupFilter))
                               @endif
                               id="{{$propertyValue->id}}"
                               value="{{$propertyValue->id}}"
                               name="{{$propertyValue->id}}"
                               type="checkbox"
                               class="h-4 w-4 border-secondary-300 rounded text-indigo-600 focus:ring-indigo-500">
                        <label for="{{$propertyValue->id}}"
                               class="ml-3 text-sm text-gray-600"> {{$propertyValue->value}}
                        </label>
                </li>
            @endforeach
        </ul>
    </div>
@endforeach

在updatedFilterProperties()中,i截取filterProperties并有条件地创建或添加元素到会话数组中。
在mount()中,您可能会注意到注解行试图将currentGroupFilter转换为id=〉true格式,但这也没有帮助。
在blade中,我成功地获得了currentgroupFilter,并且,正如我已经写过的,原则上,在渲染过程中的几分之一秒钟内,选中的复选框会正确显示,但在渲染结束时它们会消失。
我不知道我做错了什么...

wlzqhblo

wlzqhblo1#

事实证明,@checked检查在livewire中不起作用,解决方法是更改blade视图中的输入

<input wire:model="filterProperties.{{$propertyValue->id}}"
                                                           id="{{$propertyValue->id}}"
                                                           type="checkbox"
                                                           class="h-4 w-4 border-secondary-300 rounded text-indigo-600 focus:ring-indigo-500">
                                                    <label for="{{$propertyValue->id}}"
                                                           class="ml-3 text-sm text-gray-600"> {{$propertyValue->value}}
                                                    </label>

安装():

public function mount($parentGroup)
{
    $this->currentGroupId = $parentGroup->id;
    session([
        'currentGroupId' => $this->currentGroupId,
    ]);
    $this->products_tpl = $this->getProducts($this->currentGroupId())->cursorPaginate(30);
    $this->products = collect($this->products_tpl->items());
    $this->childGroups = $parentGroup->childGroups;
    $this->allProperties = $this->getProperties($this->productsId);
    if (session('filterScope-'.$this->currentGroupId())){
        $this->filterProperties = session('filterScope-'.$this->currentGroupId());
        $this->updatedFilterProperties();
    }
}

并更新():

public function updatedFilterProperties(){

    if ($this->filterProperties){
            session([
                'filterScope-'.$this->currentGroupId() => array_filter($this->filterProperties),
            ]);
    }

    if (Arr::first(session('filterScope-'.$this->currentGroupId())) != null){
        $this->products_tpl = $this->getProducts($this->currentGroupId())->whereHas('values', function ($q) {
            $q->whereIn('property_value_id', array_keys(session('filterScope-'.$this->currentGroupId())));
        })->cursorPaginate(30);
    }

    if (Arr::first(session('filterScope-'.$this->currentGroupId())) == null){
        $this->products_tpl = $this->getProducts($this->currentGroupId())->cursorPaginate(30);
    }

    $this->products = collect($this->products_tpl->items());

}

现在,选中的复选框已按预期从会话中存储的数组加载,并且我们还基于此数组提前过滤结果。

相关问题