Livewire nested input fields not showing as expected

  Kiến thức lập trình

Livewire Component


namespace AppLivewireGuide;

use AppModelsPeople;
use LivewireAttributesValidate;
use LivewireComponent;

class RequestGuide extends Component

    public $nonDasa = false;
    public $guideCopy = false;
    public $people;

    public $person_name = '';

    public $person_email = '';

    public $role = '';

    public function mount()
       $this->people = [];

    public function render()
        return view('')

    public function showNonDasa()
        if($this->nonDasa == false){
            $this->nonDasa = true;
        } else {
            $this->nonDasa = false;

    public function showGuideCopy()
        if($this->guideCopy == false){
            $this->guideCopy = true;
        } else {
            $this->guideCopy = false;

    public function addPerson()
        $this->people->push(new People());



<div class="mx-auto w-7/12">
    {{ session('alert') }}
    <form action="">

        <h1 class="text-3xl font-bold font-roboto-slab text-red-600">Create Guide</h1>
        <x-forms.input label="Guidebook Name" name="name" placeholder="Desired Guidebook Name"/>
        <x-forms.input label="Your Name" name="requestor_name" placeholder="Your Full Name"/>
        <x-forms.input label="Your Email" name="requestor_email" placeholder="[email protected]"/>
        <x-forms.checkbox wire:click="showGuideCopy" label="I want to copy content from an existing guide"
            <x-forms.input label="Guide to Copy" name="guide_to_copy" placeholder="Copied Guide Name"/>
        <x-forms.input label="Your Department" name="requestor_department" placeholder="College, Unit, or Department"/>
        <x-forms.checkbox wire:click="showNonDasa" label="I am requesting a guide for a DASA run event or program"

        @if ($nonDasa)
            <div id="nonDasaInfo">
                    <p>All guides with a start date of 7/1/2024, or after, are billed at $725.</p>
                <x-forms.input label="Bookkeeper's Name" name="bookkeeper_name" placeholder="Bookkeeper's Full Name"/>
                <x-forms.input label="Bookkeeper's Email" name="bookkeeper_email" placeholder="[email protected]"/>
                <x-forms.input label="Project Code" name="project_code" placeholder="Project Code you'd like billed"/>

            <h2 class="text-xl font-bold font-roboto-slab text-red-600 py-5">Initial Users</h2>
            <p>Your Guide must have at least one Admin user. Admins have all the rights of editors, but can also
                manage the people who can become admins and editors.</p>
            <x-forms.button wire:click="addPerson" class=" bg-red-600 text-white mt-5 mb-2 hover:bg-red-800">
                Add Person

            <table class="w-full mt-5">
                <tr class="text-center font-bold">
                    <td class="px-2">Person's Name</td>
                @foreach ($people as $index => $person)
                        <td class="px-2">
                            <x-forms.input wire:model="people.{{ $index }}.person_name" label="" name="person_name" placeholder="Full Name" class=""/>
                            <x-forms.input wire:model="people.{{ $index }}.person_email" label="" name="person_email" placeholder="Full Email" class=""/>
                            < wire:model="people.{{ $index }}.role" label="" name="role"
                                            class="bg-gray-600/10 border-gray-600/30 mx-2">
        <div class="text-center pt-10">
            <x-forms.button wire:click="save" class="bg-red-600 text-white mt-5 mb-2 hover:bg-red-800">
                Submit Guide Request

My expectation is that when I click the Add Person button, I’ll see the next table row appear with the appropriate index.

When I add this to the mount() function in my Livewire component, I do see a row with the appropriate index, so it seems like the code is working as expected.

$this->people = [['Name','[email protected]','Admin']];

The issue, is that I cannot figure out how to get the array to grow so that it’ll add the next (first) row.

Thanks in advance. I’m sure I’m missing something stupid here…

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website