Question

Laravel版本：8.x

livewire版本：2.x

我正在为出勤管理系统项目的学生注册准备表格。

下面是图像：

现在，当我填写所有字段并且选择要上传的照片时，所有其他输入字段将变为空白

表单的代码是这样的：

<div class="create-student display-flex flex-direction-column flex-align-items-center flex-justify-content-flex-start">
    @livewire('header',['name' => 'Student Registeration Page','width'=> '70%','height' => '20%'])
    <form style="margin-top: 2%; padding-top: 1%" class="student-form display-grid " wire:submit.prevent="signUpUser" enctype="multipart/form-data">
        <section class="name display-grid" >
            <div class="display-flex flex-direction-column flex-justify-content-center">
                <label for="FirstName">First Name <span style="color: red">*</span> :</label>
                <input wire:model.defer = "form.first_name" type="text" name="FirstName">
            </div>
            <div class="display-flex flex-direction-column flex-justify-content-center ">
                <label for="FirstName">Mid Name :</label>
                <input wire:model.defer = "form.mid_name" type="text" name="FirstName">
            </div>
            <div class="display-flex flex-direction-column flex-justify-content-center ">

                <label for="LastName">Last Name <span style="color: red">*</span> :</label>
                <input wire:model.defer="form.last_name" type="text" id="LastName" >
            </div>
        </section>
        <section class="father-email display-grid ">
            <div  class="display-flex flex-direction-column flex-justify-content-center">
                <div>
                    <label for="FatherName">Email <span style="color: red">*</span> :</label>
                    <input wire:model.defer="form.email" type="Email" name="FatherName">
                </div>
            </div>
            <div  class="display-flex flex-direction-column flex-justify-content-center">
                <div>
                    <label for="FatherName">Father Name <span style="color: red">*</span> :</label>
                    <input wire:model.defer="form.father_name" type="text" name="FatherName">
                </div>
            </div>

        </section>
        <section  class="roll-class display-grid flex-align-items-center ">
            <div class="display-flex flex-direction-column flex-justify-content-flex-end">
                <label for="RollNumber">Roll # <span style="color: red">*</span> :</label>
                <input wire:model.defer="form.roll_number" type="number" name="RollNumber">
            </div>
            <div class="display-flex flex-direction-column flex-justify-content-flex-end">
                <label for="Class">Class <span style="color: red">*</span> :</label>
                <input wire:model.defer="form.class" type="number" name="Class">
            </div>
        </section>
        <section class="gender-profile display-grid flex-align-items-center">
            <div class="display-flex flex-direction-column flex-justify-content-flex-end">
                <label for="gender">Choose your gender <span style="color: red">*</span> :</label>
                <div class="">
                    <label style="display: inline;" for="male">male</label>
                    <input wire:model.defer="form.gender" style="" name="gender" type="radio" value="M">
                    <label style="display: inline" for="female">female</label>
                    <input wire:model.defer="form.gender" name="gender" type="radio" value="F">
                </div>
            </div>
            <div class="display-flex flex-direction-column ">
                <label for="photo">Profile Photo <span style="color: red">*</span> : </label>
                <input wire:model.defer="form.photo" type="file" name="photo">
            </div>
        </section>

        <section class="password display-grid flex-align-items-center">
            <div style="width: 100%;height: 100%" class="display-flex flex-direction-row flex-align-items-center flex-justify-content-space-between">
            <div style="width: 50%; height: 100%" class="display-flex flex-direction-column ">
                <label for="password">Password <span style="color: red">*</span> : </label>
                <input  wire:model.defer.prevent="form.password"   type="password" name="password" required>
            </div>
            <button  type="submit" style="width: 40%;height: 100%; background-color: black;color: white">Register Student</button>
            </div>
        </section>

    </form>
</div>

组件的php类：

<?php
namespace App\Http\Livewire\Student;
use Livewire\Component;
use Livewire\WithFileUploads;

class Signup extends Component
{
    use WithFileUploads;

    public $form = [];

    public function hydrate(){
        $this->form['first_name']=null;
        $this->form['last_name']=null;
        $this->form['mid_name']=null;
        $this->form['email']=null;
        $this->form['password']= null;
        $this->form['father_name']=null;
        $this->form['class']=null;
        $this->form['roll_number']=null;
        $this->form['gender']=null;
        $this->form['photo']=null;
    }

    public function render()
    {
        return view('livewire.student.signup')
            ->extends('layouts.app')
            ->section('content')
            ;
    }

    public function signUpUser(){
        dd($this->form);
    }
}

如果您需要其他详细信息或其他内容，请告诉我！谢谢！

Answer 1

您的hydrate()方法针对每个请求运行。由于您使用的是model:wire.defer，因此不会立即向服务器发出任何请求，它们会排队等待下一个被触发的请求（显然是在上传照片时发生的）。

从Livewire v2文档中，

hydrate()：在组件水合后，但在执行操作或调用render（）之前，在每个请求上运行

mount()：在实例化组件之后但在调用render（）之前立即运行一次。

只需将hydrate()替换为mount()-public function mount() { $this->form['first_name'] = null; $this->form['last_name'] = null; $this->form['mid_name'] = null; $this->form['email'] = null; $this->form['password']= null; $this->form['father_name'] = null; $this->form['class'] = null; $this->form['roll_number'] = null; $this->form['gender'] = null; $this->form['photo'] = null; }仅在第一次呈现组件之前运行-并且应该照顾好它。

onConfirm

Livewire lifecycle hooks

为什么使用laravel livewire图片上传时会出现这种奇怪的行为

1 个答案: