当我们输入输入元素时的 Livewire 触发方法答案

【问题标题】：Livewire fire method when we type into input element当我们输入输入元素时的 Livewire 触发方法
【发布时间】：2021-04-21 05:46:57
【问题描述】：

每个用户在注册我们的网站时输入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元素时如何触发方法

【问题讨论】：

你尝试过wire:model..debounce.500ms="username" 吗？在组件中，updatedUsername() 将被调用

标签： laravel laravel-livewire

【解决方案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 = '';
    }
}

希望以上内容不言自明。

【讨论】：

【解决方案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。

【讨论】：