Livewire Component

<?php

namespace AppLivewireGuide;

use AppModelsPeople;
use LivewireAttributesValidate;
use LivewireComponent;

class RequestGuide extends Component
{

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

    #[Validate('required|min:3')]
    public $person_name = '';

    #[Validate('required|min:3')]
    public $person_email = '';

    #[Validate('required')]
    public $role = '';

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

    public function render()
    {
        return view('livewire.guide.request-guide')
            ->layout('components.layout');
    }

    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());
    }

}

request-guide-blade.php

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

        <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"
                          name="is_copy"/>
        @if($guideCopy)
            <x-forms.input label="Guide to Copy" name="guide_to_copy" placeholder="Copied Guide Name"/>
        @endif
        <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"
                          name="is_dasa"/>
        <x-forms.divider/>

        @if ($nonDasa)
            <div id="nonDasaInfo">
                <x-inline-alert>
                    <p>All guides with a start date of 7/1/2024, or after, are billed at $725.</p>
                </x-inline-alert>
                <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"/>
            </div>
        @endif

        <div>
            <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
            </x-forms.button>

            <table class="w-full mt-5">
                <thead>
                <tr class="text-center font-bold">
                    <td class="px-2">Person's Name</td>
                    <td>Email</td>
                    <td>Role</td>
                </tr>
                </thead>
                <tbody>
                @foreach ($people as $index => $person)
                    <tr>
                        <td class="px-2">
                            <x-forms.input wire:model="people.{{ $index }}.person_name" label="" name="person_name" placeholder="Full Name" class=""/>
                        </td>
                        <td>
                            <x-forms.input wire:model="people.{{ $index }}.person_email" label="" name="person_email" placeholder="Full Email" class=""/>
                        </td>
                        <td>
                            <x-forms.select wire:model="people.{{ $index }}.role" label="" name="role"
                                            class="bg-gray-600/10 border-gray-600/30 mx-2">
                                <option>Admin</option>
                                <option>Editor</option>
                            </x-forms.select>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        <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
            </x-forms.button>
        </div>
    </form>
</div>

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…