提问者:小点点

Livewire/Dom模板未更新


第一次使用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组件正在接收过滤的_值,正如预期的那样。但是浏览器上什么也没有发生。我怎样才能强制重播?


共1个答案

匿名用户

要更新(刷新/重新渲染)组件,可以使用侦听器

protected $listeners = ['refreshComponent' => '$refresh'];

然后,当发出refreshComponent事件时,它将刷新组件,而不运行任何其他操作。

Livewire repo中有一个Github讨论描述了这一点。

关于您的更新筛选方法(仅作为提示):
还有一些特殊方法,如更新foo更新foo在更新项目之前/之后运行。请参阅生命周期挂钩。