Laravel Livewire 线：单击未定义触发功能

Question

我正在网页中构建搜索栏。理想情况下，用户将在搜索字段中输入搜索文本，然后如果找到记录，则搜索结果表将显示并显示找到的记录。我正在使用 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() 并且它没有被执行。

我将不胜感激！

Answer 1

你不需要使用括号，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>