不更新简单Livewire组件的UI

Question

我有一个小型的livewire组件，可以搜索用户。后端看起来工作正常，如果我打印出查询的结果，用户就会正确地返回函数。

然而，在UI中，任何出现在下拉列表中的用户都将保留下来，即使记录不再存在于$this->users中。

当返回结果时，部分DOM似乎不会重绘。组件在下面。

UserSearch.php

namespace App\Http\Livewire\Utilities;

use App\Models\Team;
use App\Models\User;
use Livewire\Component;

class UserSearch extends Component
{
    public $user;
    public $search;
    public $users = [];

    public function mount() {
        $this->user = auth()->user();
    }

    public function selectUser($user) {
        $this->emit('userSelected', $user);
    }

    public function updatedSearch($needle) {
        $this->users = User::teamUsers()->where('name','LIKE',"%$needle%")->get();
    }


    public function render()
    {
        return view('livewire.utilities.user-search',[
            'users' => $this->users
        ]);
    }
}

user-search.blade.php

<div>
    <label for="combobox" class="block text-sm font-medium text-gray-700">Assigned to</label>
    <div class="relative mt-1">
        <input id="combobox" type="text" class="w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm" role="combobox" aria-controls="options" aria-expanded="false" wire:model="search">
        <button type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
            <!-- Heroicon name: solid/selector -->
            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
        </button>


        <ul class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" id="options" role="listbox">
            <!--
              Combobox option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.

              Active: "text-white bg-indigo-600", Not Active: "text-gray-900"
            -->
                @foreach($users as $user)
                    <li class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 cursor-pointer" id="option-0" role="option" tabindex="-1" wire:click="selectUser({{$user}})">
                            <div class="flex">
                                <!-- Selected: "font-semibold" -->
                                <span class="truncate">{{$user->name}}</span>
                                <!-- Active: "text-indigo-200", Not Active: "text-gray-500" -->
                                <span class="ml-2 truncate text-gray-500">{{$user->email}}</span>
                            </div>

                            <!--
                              Checkmark, only display for selected option.

                              Active: "text-white", Not Active: "text-indigo-600"
                            -->
                            <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600">
                  <!-- Heroicon name: solid/check -->
                          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                          </svg>
                        </span>
                    </li>
                @endforeach

            <!-- More items... -->
        </ul>
    </div>
</div>

Answer 1

我怀疑我一贴出这个问题就会找到答案。

此错误是由冲突的ID引起的。

我直接从Tailwind复制了UI，每个<li>元素都有相同的id，这使得框架无法管理应该删除哪些元素。

现在有关的一行内容如下：

<li class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 cursor-pointer" id="user-{{$user->id}}" role="option" tabindex="-1" wire:click="selectUser({{$user}})">