Laravel Livewire 选择搜索下拉菜单不起作用答案

【问题标题】：Laravel Livewire Select Search Dropdown not workingLaravel Livewire 选择搜索下拉菜单不起作用
【发布时间】：2021-08-26 11:27:17
【问题描述】：

我在 Laravel Livewire 项目中有一个表单，并尝试从数据库中搜索和选择用户。当我搜索用户时，搜索结果中的用户，但没有选择。此外，仅显示页面刷新没有错误。我的代码如下： I'm trying this

livewire 组件视图

<div class="col-md-4">
    <div class="form-group row">
        <label class="control-label col-md-2 col-sm-2">Select User</label>
        <div class="col-md-10 col-sm-10 ">
            <div>
                <select wire:model="user_id" class="form-control" name="user_id" required>
                    <option></option>
                    @foreach($users as $user)
                        <option value="{{$user->id}}">{{$user->username}} : {{ $user->fullname }}</option>
                    @endforeach
                </select>
            </div>
            <div style="position:relative">
                <input wire:model.debounce.500ms="inputsearchuser" class="form-control relative" type="text"
                       placeholder="search..."/>
            </div>
            <div style="position:absolute; z-index:100">
                @if(strlen($inputsearchuser)>2)
                    @if(count($searchusers)>0)
                        <ul class="list-group">
                            @foreach($searchusers as $searchuser)
                                <li class="list-group-item list-group-item-action">
                                    <spanwire:click
                                    ="selectuser({{$searchuser->id}},{{$searchuser->terms}})">{{$searchuser->username}}
                                    : {{$searchuser->fullname}}</span>
                                </li>
                        </ul>
                        @endforeach
                    @else
                        <li class="list-group-item">User Not Found...</li>
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>

livewire 组件

class MyLiveWireComponent extends Component
{
    public $j = 1;
    public $users = [];

    public $inputsearchuser = '';
    public $user_id;

    public function selectuser($user_id,$terms)
    {
        $this->user_id = $user_id;
$this->terms = $terms;
        $this->inputsearchuser = '';
    }

    public function render()
    {
        $searchusers = [];
        if (strlen($this->inputsearchuser) >= 2) {
            $searchusers = User::Where('username', 'LIKE', '%' . $this->inputsearchuser . '%')
                ->get();
        }
        return view('livewire.admin.orders.add-order', ['searchusers' => $searchusers])->layout('components.layouts.admin');
    }
}

【问题讨论】：

dd($searchusers) 在运行查询后检索一些数据？
是的，我得到了搜索结果
为什么不使用 selec2 来实现呢？
livewire 冲突一些 select2

标签： laravel laravel-livewire

【解决方案1】：

改变这个：

<spanwire:click="selectuser({{$searchuser->id}},{{$searchuser->terms}})"> 
{{$searchuser->username}} : {{$searchuser->fullname}}
</span>

收件人：

<span wire:click.prevent="selectuser({{$searchuser->id}},{{$searchuser->terms}})"> 
{{$searchuser->username}} : {{$searchuser->fullname}}
</span>

【讨论】：

对不起，它的错误类型。还是不行

【解决方案2】：

您的组件应该只有一个单级根元素。另外，在循环内的元素中添加wire:key。

      <ul class="list-group">
           @foreach($searchusers as $key => $searchuser)
                <li wire:key="{{'users'.$key}}" class="list-group-item list-group-item-action">
                    <span wire:click="selectuser({{$searchuser->id}},                        
                    {{$searchuser->terms}})">{{$searchuser->username}}
                    : {{$searchuser->fullname}}</span>
                 </li>
            @endforeach
      </ul>

【讨论】：

【解决方案3】：

您是否按照上面的建议将其更改为wire:click.prevent？否则，它不会阻止默认操作的发生，并且可能会导致该行为。

【讨论】：