第一次使用Livewire与阿尔卑斯山和它的一个真正的痛苦调试。阿尔卑斯控制台错误如此模糊,有没有办法让它们更加具体和冗长?
我离题了。
我正在更新livewire组件上的一个数组,当它不是空的时候,应该显示在DOM中。一切正常,在控制台中查看时,我可以看到正在进行更改。在控制台内,一切都按其应有的方式进行。问题是,我在浏览器中什么也没发生!
<div x-data="{ ...data() }" class="overflow-hidden wrapper w-full ">
<div class="flex justify-end w-full relative coins-container space-x-6">
<input id="search-toggle" type="search" pclass="block w-full bg-gray-100 focus:outline-none focus:bg-white focus:shadow text-gray-700 font-bold rounded-lg pl-12 pr-4 py-4 shadow-xl" wire:model.debounce.750ms="searched_term" />
</div>
@if($filtered_variable)
<template>
<div class="mt-1 wrapper">
<div id="search-content" class=" w-full text text-gray-600 rounded-lg overflow-y-auto bg-white shadow-xl" style="max-height: 500px;">
<div id="searchresults" class="h-auto w-full mx-auto">
@foreach ($filtered_variable as $index => $value)
<h1 x-text="{{$value['title']}}"></h1>
@endforeach
</div>
</div>
</div>
</template>
@endif
</div>
Class Searchbar extends Component
{
public $first_array;
public $searched_term;
public $filtered_array;
public function mount()
{
$db_content = Stuff::where(function ($query) {
$query->where('thing', false)
->orWhereNull('thing');
})
->with('variable_eg')
->get();
$this->first_array = $db_content;
$this->searched_term = '';
$this->filtered_array = [];
}
public function render()
{
return view('livewire.searchbar');
}
public function updated($name, $value)
{
if (empty($this->searched_term)) {
return '';
}
$this->filtered_array = array_filter($this->first_array, array($this, 'filter'));
public function filter($element)
{
$title = strtolower($element['title']);
if (strpos($title, $this->searched_term) !== false) {
return true;
}
}
}
在控制台内,我可以看到我的alpine/livewire组件正在接收过滤的_值,正如预期的那样。但是浏览器上什么也没有发生。我怎样才能强制重播?
要更新(刷新/重新渲染)组件,可以使用侦听器
protected $listeners = ['refreshComponent' => '$refresh'];
然后,当发出refreshComponent
事件时,它将刷新组件,而不运行任何其他操作。
Livewire repo中有一个Github讨论描述了这一点。
关于您的更新
和筛选
方法(仅作为提示):
还有一些特殊方法,如更新foo
,更新foo
在更新项目之前/之后运行。请参阅生命周期挂钩。