Array issue with Livewire

#1

What seems to be the problem:
I want to add items to an array and I’m doing it using a text box and when I click the add button, the I display the list by looping over the array and display the text in a textbox along with a remove button.

When I delete an item sometimes all items disappear at once and when I click the delete button for any that item remains and some other item gets removed.

Steps to Reproduce:
Add some text to the input box and click add
Then add another item
now try to remove any one item

Are you using the latest version of Livewire: yes

Do you have any screenshots or code examples:

SomeComponent.php

class SomeComponent extends Component
{
    public $text;
    public $items = [];

    public function render()
    {
        return view('livewire.some-component');
    }

    public function addText()
    {
        array_push($this->items, ['text' => $this->text]);

        //Alternative:
        // $this->items[] = ['text' => $this->text];
    }

    public function removeText($index)
    {
        $this->items = array_splice($this->items, $index, 1);

        //Alternative:
        //unset($this->items[$index]);
    }
}

The some-component.blade.php

<div>
    <ul>
        @foreach($items as $item)
            <li wire:key="Item{{$loop->index}}">
                <input wire:model="items.{{$loop->index}}.text" type="text"/>
                <button wire:click="removeText({{$loop->index}})" type="button">X</button>
            </li>
        @endforeach
    </ul>

    <div>
        <input wire:model="text" type="text"/>
        <button wire:click="addText" type="button">Add</button>
    </div>
</div>
#2

Try re-indexing the array.

public function removeText($index)
    {
        unset($this->items[$index]);

        $this->items = array_values($this->items);
    }
3 Likes
#3

Thanks so it was a PHP specific issue?
I’m not new to PHP but some weird things happening with me with Livewire.

Any time I push to the array, somehow an extra item gets pushed, and if I continue those empty items keep adding, for first item, one empty item gets added, for 2nd 2, for third 4, and so on. And all I’m doing is:


  array_push($this->items, ['text' => $this->text]);
//Alternative:
// $this->items[] = ['text' => $this->text];

but unfortunately, I couldn’t reproduce it with this code but this is the exact same code thats behaving like this.
Any help would be really appriciated.

#4

What happens if you push an empty string e.g. array_push($this->items, ['text' => '']);

#5

Here’s whats happening when I add one item.

php_push_array_livewire
php_push_array_livewire791×692 97.5 KB

#6

I have just tried this with the code you gave in a new component and it worked as expected.

You are going to have to have a look at the network request to see if you can see what is being sent.

Also try dumping the items array inside the addText method

#7

When I us ul li it works just fine as soon as I change it to div it goes crazy. Seems like to be Livewire bug perhaps. I may be wrong though.

#8

I have it working with a div so I still think it is other code you have on the page.

Maybe there was an open div tag on the page?