当我们输入输入元素时，Livewire 触发方法

Question

每个用户在他们去注册我们的网站时输入 username 或 email，我们想实时检查哪个 username 或 password 存在于我们的数据库与否。为了实现这个功能，我在 blade:

中有这个 input 元素

<input type="text" class="form-control"
       wire:model.lazy="username"
       value="{{old('username')}}">

因为我不确定这个实现是否正确我在 component.

上没有任何方法

例如：

public function username($username){
    echo "Hey {$username} !";
}

我想知道我们如何在输入 input 元素时触发方法

Answer 1

input 上的 lazy 指令修饰符可防止在字段更新时向服务器发送请求（150 毫秒默认去抖动）。如果您想在他们键入时提供反馈，请删除 lazy 修饰符。

为了确定 username/email 是否在使用中，您需要挂钩 username 属性的生命周期。我的意思是 updatedUsername 函数将在 Livewire 组件中 username 属性的值更新时触发。

您可以执行以下操作（在输入字段中使用或不使用 lazy 修饰符）：

Livewire 视图

<div>
    <label for="username">Username</label>
    <input id="username" name="username" type="text" value="{{ old('username') }}"
           wire:model="username">
    <p>{{ $availability }}</p>
</div>

Livewire 组件

namespace App\Http\Livewire;

use App\Models\User;
use Livewire\Component;

class RegisterForm extends Component
{
    public $username;

    public $availability;

    public function render()
    {
        return view('livewire.register-form');
    }

    public function updatedUsername()
    {
        if (User::where('email', $this->username)->first()) {
            $this->availability = 'That username is already taken';
            return;
        }

        $this->availability = '';
    }
}

希望以上是不言自明的。

Answer 2

请注意，当您写下“我们的数据库中存在哪个用户名或密码”时，我有点担心 - 希望您不要检查密码是独一无二的，我希望你通过 Hash 门面正确地散列它们。

更好的方法是为您的组件定义一些 $rules，并使用内置的验证功能。

改为检查验证错误包，

<input 
    type="text" 
    class="form-control"
    wire:model.lazy="username"
/>
@error('username') {{ $message }} @enderror

然后让您的组件通过 rules() 方法使用验证，并在 updated() 挂钩中使用 validateOnly()。

<?php 

namespace App\Http\Livewire;

use Livewire\Component;

class RegisterForm extends Component
{
    public $username;

    public function render()
    {
        return view('livewire.register-form');
    }

    public function updated($field)
    {
        $this->vbalidateOnly($field);
    }

    /**
     * The rules for this component
     */
    public function rules() 
    {
        return [
            'username' => [
                'required',
                'min:3',
                'unique:users,email',
            ]
        ];
    }
}

参见official Livewire documentation on validation。

当我们输入输入元素时，Livewire 触发方法

Livewire fire method when we type into input element

laravel

laravel-livewire