html - Laravel livewire，在输入表单时防止自动渲染

问题描述

抱歉，我在使用 liveware 创建简单表单时遇到问题，我输入的每种类型都会立即呈现，因此它看起来正在加载，并且在大量输入后，图像中出现错误，如何解决此问题并防止自动打字时渲染？

我使用 Laravel liveware 1.3

截屏

刀片组件

<form wire:submit.prevent="check"><div class="form-group">
      <label class="label">Email</label>
      <div class="input-group">
         <input wire:model="email" type="email" class="form-control" placeholder="xxx@xxx.xx">
         <div class="input-group-append">
            <span class="input-group-text">
            <i class="mdi mdi-check-circle-outline"></i>
            </span>
         </div>
      </div>
      @error('email')<label class="text-danger">{{ $message }}</label> @enderror
  </div>
  <div class="form-group">
      <label class="label">Password</label>
      <div class="input-group">
         <input wire:model="password" type="password" class="form-control" placeholder="**********">
         <div class="input-group-append">
            <span class="input-group-text">
            <i class="mdi mdi-check-circle-outline"></i>
            </span>
         </div>
      </div>
      @error('password')<label class="text-danger">{{ $message }}</label> @enderror
   </div>
   <div class="form-group">
      <button class="btn btn-success submit-btn btn-block" wire:loading.attr="disabled" >
         <div wire:loading.remove>Login</div>
         <div wire:loading>
            <div class="loading-bar bg-white"></div>
            <div class="loading-bar bg-white"></div>
            <div class="loading-bar bg-white"></div>
            <div class="loading-bar bg-white"></div>
         </div>
      </button>
   </div>
</form>

控制器

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Login extends Component
{
    
    public $password;
    public $email;

    protected $rules = [
            'password' => 'required',
            'email' => 'required|email',
        ];
        
    public function check()
    {
    
        $this->validate($this->rules);
        
    }

    public function render()
    {
        return view('livewire.login');
    }
}

路线

Route::livewire('/login','login');

感谢帮助。

标签： htmllaravellaravel-livewire

<input wire:model="email".....

尝试将其更改为（仅在提交时点击服务器）

<input wire:model.defer="email"

甚至（仅在更改时点击服务器（不是在每个字符上））

<input wire:model.lazy="email"

html - Laravel livewire，在输入表单时防止自动渲染

问题描述

解决方案

推荐阅读