Why is this state not persisted?

#1

When I click set and then save, ‘John’ is printed instead of ‘Foobar’. I would expect, that the item property is persisted accross clicks. Why is John printed instead?

class LivewireComponent extends Component
{
    public $item;

    public function mount()
    {
        $this->item = Item::whereName('John')->firstOrFail();
    }

    public function set()
    {
        $this->item->name = "Foobar";
    }

    public function save()
    {
        dump($this->item->name);
    }

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

Blade:

<div>
  <p>{{ $item->name }}</p>
  <button wire:click="set()">Set</button>
  <button wire:click="save()">Save</button>
</div>

Code playground: https://laravelplayground.com/#/snippets/9e503a4d-5b7e-4e4e-9323-bbadc54c191b

#2

Run this

public function set()
    {
        $this->item->name = "Foobar";
        dd($this->item);
    }

Check out the attributes and original arrays and you’ll see how Laravel has updated the Item model. To persist the change you would need to save the Item. Alternatively, you could toArray() your model and modify the array as you see fit.

#3

Thank you. I managed to solve this problem:

use Livewire\Component;

class LivewireComponent extends Component
{
    public $item;
    public $state = [];

    public function mount()
    {
        $this->item = Item::whereName('John')->firstOrFail();
    }

    public function set()
    {
        $this->state['name'] = 'Foobar';
    }

    public function save()
    {
        $this->item->update($this->state);
    }

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