提问者:小点点

Laravel Livewire选择搜索下拉列表不工作


我在Laravel 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');
    }
}

共3个答案

匿名用户

改变这个:

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

匿名用户

您的组件应该只有一个单级根元素。此外,在循环内部的元素中添加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>

匿名用户

你是不是按照上面的建议改成了线:click.prevent?否则,它不会阻止默认操作的发生,并可能导致确切的行为。