英文:
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
<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>
mount():
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();
}
}
and updated():
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());
}
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论