LaravelLivewire實時搜索未正確更新結果

我有以下 livewire 代碼來執行頁面標題的搜索，這在第一次搜索時作業正常，但后續搜索不會完全洗掉前一次搜索的結果。

namespace App\Http\Livewire\Page;

use App\Models\Page;
use Livewire\Component;

class Search extends Component
{
    public $searchQuery = "";
    public $searchResults;

    public function resetSearchValue() {
        $this->searchQuery = "";
    }

    public function mount() {
        $this->reset();
    }

    public function render()
    {
        if(strlen($this->searchQuery) > 2) {
            $this->searchResults = Page::query()
                ->select(['title', 'slug'])
                ->where('title', 'like', "%{$this->searchQuery}%")
                ->get();
        }
        return view('livewire.page.search');
    }
}

和

<div>
    <input 
        wire:model.debounce.350ms="searchQuery" 
        @focus="searchFocused = true" 
        @blur="searchFocused = false" 
        @click.outside="$wire.resetSearchValue()" 
        autocomplete="off" 
        type="text" 
        placeholder="Search..." 
        id="sitesearch" 
    >
    @if(strlen($searchQuery) > 0)
        <div  
            role="menu" 
            aria-orientation="vertical" 
            -labelledby="menu-button" 
            tabindex="-1"
        >
            <div class="py-1" role="none">
                @if(strlen($searchQuery) > 2)
                    @if($searchResults->count() > 0)
                        @foreach($searchResults as $result)
                            <a 
                                href="{{ route('pages.index', $result->slug) }}"
                                role="menuitem" 
                                tabindex="-1" 
                                id="menu-item-0"
                            >{{ $result->title }}</a>
                        @endforeach
                    @else
                        <p>
                            No results found
                        </p>
                    @endif
                @else
                    <p>
                        You need to type at least 3 characters
                    </p>      
            </div>     
        </div>
    @endif
</div>

例如，搜索“頁面”將回傳類似

• 我的第 1 頁
• 第2頁
• 精彩的第 3 頁

但是，如果我然后搜索“Page Z”，我得到的結果是

• 我的第 1 頁
• 第2頁
• 未找到結果

如果我搜索“Page Zz”，我得到的結果是

• 我的第 1 頁
• 未找到結果

我無法弄清楚為什么它沒有從以前的結果中清除結果。

uj5u.com熱心網友回復：

基本上，這是 Livewire 無法跟蹤元素（通常是回圈中生成的動態元素）時遇到的 DOM 差異問題的結果。

對此的簡單解決方案是向wire:key回圈中的根元素添加一個值，如下所示。

@if(strlen($searchQuery) > 2)
    @if($searchResults->count() > 0)
        @foreach($searchResults as $result)
            <a 
                href="{{ route('pages.index', $result->slug) }}"
                role="menuitem" 
                tabindex="-1" 
                id="menu-item-0"
                wire:key="result-{{ $result->id }}"
            >{{ $result->title }}</a>
        @endforeach
    @else
        <p wire:key="no-results">
            No results found
        </p>
    @endif
@else
    <p wire:key="searchquery-short">
        You need to type at least 3 characters
    </p> 
@endif

此外，我已將這些添加到其他可能會顯示的選項中，因此毫無疑問應該顯示哪個元素。

請注意，wire:key頁面上的所有值都必須是唯一的（就像 HTML 元素的 ID 屬性一樣）。

標籤：php 拉拉维尔 laravel-livewire

上一篇：無法在Laravel中設定cookie

下一篇：無法使用wordpress術語獲取器從術語物件中檢索術語名稱