我在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');
}
}
改变这个:
<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?否则,它不会阻止默认操作的发生,并可能导致确切的行为。