如何解决Laravel Livewire wire:点击未定义触发功能
我正在网页中构建搜索栏。理想情况下,用户会在搜索字段中输入搜索文本,然后如果找到记录,搜索结果表将显示并显示找到的记录。我正在使用 Laravel Livewire 来实现此功能,但是,我遇到了 wire:click 未触发事件的问题,需要任何帮助!
这是我的刀片文件 (resources/livewire/dashboard.blade.PHP) 包含搜索栏:
<form>
<label for="searchText" class="block text-xx font-medium text-gray-700">Search Users</label>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="relative flex items-stretch flex-grow focus-within:z-10">
<input type="text" name="searchText" id="searchText"
class="focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-none rounded-l-md pl-10 sm:text-sm border-gray-300" placeholder="User ID / Email Address / Mobile Number"
wire:model="searchText">
</div>
<button wire:click="search()" class="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
Search
</button>
</div>
</form>
这是在 App/Http/Livewire/Dashboard.PHP 文件中定义的动作
<?PHP
namespace App\Http\Livewire;
use Illuminate\Support\Facades\Http;
use Livewire\Component;
class Dashboard extends Component
{
public $stats,$searchText;
public $showResultsTable = false;
protected $accountAPIRootURL = 'https://example.com/api/v2/';
public function render()
{
$response = Http::withHeaders([
'Accept' => 'application/json'
])->get($this->accountAPIRootURL . 'statistics/overview');
if ($response->successful()) {
$stats = $response['data'];
} else {
$stats = [
'total_users' => 0,'new_users' => 0,'invitations' => 0,'new_invitations' => 0,'requests' => 0,'new_requests' => 0
];
}
$this->stats = $stats;
$this->searchText = '';
return view('livewire.dashboard');
}
public function search()
{
$response = Http::withHeaders([
'Accept' => 'application'
])->get($this->accountAPIRootURL . 'admin/search',[
'searchText' => $this->searchText
]);
if ($response->successful()) {
$this->showResultsTable = true;
$this->searchText = '';
}
}
}
这是我的 template.blade.PHP 文件,其中调用了@livewire 组件
@extends('layouts.app')
@section('content')
@livewire('dashboard')
@endsection
我现在不太担心显示结果表,因为当我单击刀片中的搜索按钮时,search() 函数似乎没有被触发。我怎么知道,我在 search() 函数中放置了一个 dd() 并且它没有被执行。
我将不胜感激!
解决方法
不需要使用括号,wire:click="search"
更新:在 livewire 中处理表单时尝试这种不同的语法
<form wire:submit.prevent="search">
//.....
<div class="mt-1 flex rounded-md shadow-sm">
//.....
<button class="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
Search
</button>
</div>
</form>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。