php - Laravel-Livewire - I'm Losing my Place when Updating a List of Child Components

I could use some help as I learn Livewire. Here's the scenario:

ComponentmainPage renders a list of child components based on an array called$missingTechs. Code as follows:

<div id="tech-names" class="pr-5 pl-5">
      @foreach ($missingTechs as $tech)
         <livewire:missing-tech :name="$tech" :key="$loop->index">
      @endforeach
</div> 
Copy code

The child component (missingTech) simply renders a Button with the passed parameter ala:

<span>
    <button wire:click="showTechAddModal">
        {{ $techName }}
    </button>
</span>
Copy code

Clicking this button emits to the parent to show a modal that takes some input from the user.

public function showTechAddModal()
    {
        $this->emit('addTechInitials', $this->techName);
        // $this->techInitials = '';
        // $this->techAddModalIsVisible = true;
    }
Copy code

Which brings me to the issue. I am seeking to remove this particular tech from the array and have the Parent component dynamically update the children. As mentioned before, the children are based on a list of values held in an array called$missingTechs located in the parent.

This modal renders properly, input is saved to the database properly, modal is dismissed properly.

I have used a number of techniques to update the underlying$missingTechs array to remove the item in question, each of which update the array properly but the display doesn't reflect the newly adjusted array. My current approach is:

array_splice($this->missingTechs, array_search($this->techName, $this->missingTechs), 1);
Copy code

which seems to work by echoing out viadd(). However, the list that is then rendered is still incorrect. More to the point, it seems that livewire is losing its index(???).

From a user perspective, this list renders items 1, 2, and 3 at indexes 0, 1, and 2. In all situations, deleting any of the items does effectively update the values of the array, however the 3rd item of the array is the one that is affected visually (deleting items 1, 2, or 3 results in a proper array but items 1 and 2 still remain in the displayed list).

Fwiw I've even tried rebuilding the array entirely with similar results. I'm obviously missing something.

I'm sure I am saying this in a confusing fashion... Any help is appreciated. I can only imagine that this is designed to be more simple that I am finding it to be however.

Thanks for any help.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.