时间戳

首页 > 解决方案 > Laravel Livewire 选择搜索下拉菜单不起作用

laravel - Laravel Livewire 选择搜索下拉菜单不起作用

问题描述

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

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>
火线组件
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');
    }
}

标签： laravellaravel-livewire

解决方案

改变这个：

<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>

推荐阅读