复选框在Livewire中的行为令人费解。

huangapple go评论59阅读模式
英文:

Incomprehensible behavior of checkboxes in Livewire

问题

以下是您要翻译的内容:

"In updatedFilterProperties() i intercept filterProperties and conditionally create or add elements to the session array."

在updatedFilterProperties()函数中,我拦截filterProperties并有条件地创建或添加元素到会话数组中。

"In mount() you may notice in the commented line an attempt to convert currentGroupFilter to the form id=>true, but that didn't help either."

在mount()函数中,您可能注意到在注释的那一行尝试将currentGroupFilter转换为id=>true的形式,但这也没有帮助。

"In blade, I successfully get currentgroupFilter and, as I already wrote, in principle, for a fraction of a second during rendering, the selected checkboxes are displayed correctly, but at the end of rendering they disappear."

在Blade模板中,我成功获取了currentgroupFilter,正如我已经写过的那样,原则上在渲染过程中的一小部分时间内,选定的复选框被正确显示,但在渲染结束时它们消失了。

"I don't know what I'm doing wrong...."

我不知道我做错了什么....

英文:

The checkboxes of the selected checkboxes are displayed correctly for a fraction of a second when the page is loaded, but they disappear at the end of rendering. If you delete wire:model, the checkboxes are always displayed correctly as expected. Help me understand what is the reason for this behavior?

My Livewire Controller

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

And my blade

@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

In updatedFilterProperties() i intercept filterProperties and conditionally create or add elements to the session array.

In mount() you may notice in the commented line an attempt to convert currentGroupFilter to the form id=>true, but that didn't help either.

In blade, I successfully get currentgroupFilter and, as I already wrote, in principle, for a fraction of a second during rendering, the selected checkboxes are displayed correctly, but at the end of rendering they disappear.

I don't know what I'm doing wrong....

答案1

得分: 0

以下是翻译好的代码部分:

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

请注意,我已经为您翻译了代码部分,没有包括注释或其他文本。如果您需要任何其他帮助,请随时告诉我。

英文:

As it turned out, the @checked check does not work in livewire. The solution was to change the input in the blade view

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

mount():

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

and updated():

public function updatedFilterProperties(){

    if ($this-&gt;filterProperties){
            session([
                &#39;filterScope-&#39;.$this-&gt;currentGroupId() =&gt; array_filter($this-&gt;filterProperties),
            ]);
    }

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

    if (Arr::first(session(&#39;filterScope-&#39;.$this-&gt;currentGroupId())) == null){
        $this-&gt;products_tpl = $this-&gt;getProducts($this-&gt;currentGroupId())-&gt;cursorPaginate(30);
    }

    $this-&gt;products = collect($this-&gt;products_tpl-&gt;items());

}

Now the selected checkboxes are loaded as expected from the array that is stored in the session, and also based on this array, we filter the result in advance.

huangapple
  • 本文由 发表于 2023年2月23日 20:35:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/75544927.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定