Laravel Livewire 搜索选择下拉框点击无响应页面刷新问题排查

问题修复 #

已确认的错误点 #

• 视图中span标签与wire:click指令之间缺少空格，错误写为<spanwire:click，导致Livewire无法绑定点击事件，点击后触发页面默认刷新
• 搜索结果的@foreach循环闭合标签位置错误，放在了</ul>之后，导致DOM结构异常
• 组件未提前声明$terms公共属性，selectuser方法中直接赋值会触发未定义属性错误
• 下拉框绑定的$users数组始终为空，即便给user_id赋值，下拉框没有对应选项也无法显示选中效果
• wire:click传递的字符串参数未加引号，若terms为字符串类型会触发JS语法错误
• 搜索字符长度校验前后不一致：视图判断>2，组件查询判断>=2，会出现后台返回结果但前端不展示的问题

修复后的视图代码 #

<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 value=""></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">
                                    <span wire:click="selectuser({{$searchuser->id}},'{{$searchuser->terms}}')">{{$searchuser->username}}
                                    : {{$searchuser->fullname}}</span>
                                </li>
                            @endforeach
                        </ul>
                    @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;
    // 新增声明terms属性
    public $terms;

    public function selectuser($user_id,$terms)
    {
        $this->user_id = $user_id;
        $this->terms = $terms;
        $this->inputsearchuser = '';
        // 把选中的用户加入到下拉框的选项数组里，保证下拉框能识别到选中值
        $selectedUser = User::find($user_id);
        if($selectedUser) {
            $this->users = [$selectedUser];
        }
    }

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

如果你不需要用到terms字段，可以直接删掉对应参数和属性声明，减少不必要的错误。

内容的提问来源于stack exchange，提问作者kamrul islam