Laravel – In Livewire can I update a variable instead of writing to the database in a listener method when using $emitUp?

You say you are unable to access the input values (room name and description) from within the parent House store() method.

In your current code, the input values are stored in each Room Livewire component, which emits an event every time there is a change (via keydown). The parent Houses component listens to these events with the updateRoom method. However, in the updateRoom method, the changes are not being saved anywhere persistently.

I suppose it is the main reason you are not seeing the updated values in the store() method: they are being lost after the updateRoom method finishes running.

A possible solution would be to be stored persistently in the Houses component, so they can be accessed later in the store() method.
That means initializing a $rooms property in the Houses component and updating this property in the updateRoom method.

With these modifications, whenever a room’s details are updated and the ‘roomUpdated‘ event is emitted, the parent component’s $rooms property gets updated. Then, when the store() method is called, the $rooms property contains all the updated room details, so you can access the input values in store().

Your views/livewire/houses/createHouse.blade.php remains unchanged.

In views/livewire/rooms/room.blade.php, emit an event when the input field loses focus (i.e., when you click outside of it).

<div>
    <input type="text" wire:blur="$dispatch('roomUpdated', ['id' => $room->id, 'field' => 'name', 'value' => $event.target.value])" 
        id="roomName" wire:model.defer="name" placeholder="Name">
    <input type="text" wire:blur="$dispatch('roomUpdated', ['id' => $room->id, 'field' => 'description', 'value' => $event.target.value])" 
        id="roomDesc" wire:model.defer="description" placeholder="Description">
</div>

The wire:blur event listener is used to trigger the dispatch of the roomUpdated event when a user finishes editing a room’s details (i.e., when the input field loses focus). This is done using the Livewire V3 $dispatch method, which replaces the old emit() or dispatchBrowserEvent.
That way, the Houses parent component can catch this event, denoted by the #[On('roomUpdated')] attribute, and update its $rooms property accordingly. The event name and relevant parameters are passed with $dispatch. This communication allows the state of the room’s details to be tracked without saving them to the database until the final confirmation from the user.

wire:keydown (as in your original code) may cause the event to be emitted too frequently, which could affect performance. Emitting the event on wire:blur instead ensures the event is only emitted when the user finishes their edits. That is generally more efficient and gives the desired result in your case.

That assumes that each room component has access to the $key of the room, which is its index in the $rooms array in the parent Houses component.

Without this change, the parent component would not receive the updated room details, and thus would not be able to store them for later access in the store() method.

But in http/Livewire/Houses.php, do initialize the $rooms property, listen to the roomUpdated event, and update the $rooms array whenever that event is triggered.

<?php

namespace AppHttpLivewire;

use AppModelsHouse;
use AppModelsRoom;
use LivewireComponent;
use LivewireOn;

class Houses extends Component
{
    public $houses, $address1, $town, $rooms;
    public $isOpen = 0;

    public function render()
    {
        $this->houses = House::all();

        if($this->house_id){
            $house = House::find($this->house_id);
            $this->rooms = $house->rooms->toArray();  // fetch related rooms
        } else {
            $this->rooms = [];  // for a new house, start with an empty list of rooms
        }

        return view('livewire.houses.houses');
    }

    #[On('roomUpdated')]
    public function updateRoom($params)
    {
        //Update the name and description for the room
        $this->rooms[$params['id']][$params['field']] = $params['value'];
    }

    public function store()
    {
        // dd($this->rooms); //--- THAT SHOULD NOW SHOW THE UPDATED NAME & DESCRIPTION ---//

        // Update the house details
        House::updateOrCreate(['id' => $this->house_id], [
            'address1' => $this->address1,
            'town' => $this->town
        ]);

        // Delete all rooms for this house
        Room::where('house_id',$this->house_id)->delete();

        // Re-add all rooms for this house
        foreach($this->rooms as $room){
            Room::updateOrCreate(['id' => $room->id], [
                'house_id' => $this->house_id,
                'name' => $room['name'],
                'description' => $room['description'],
            ]); 
        }

        session()->flash('message', $this->house_id ? 'House Updated Successfully.' : 'House Created Successfully.');
    }
}

In the updateRoom function, the $rooms array is being directly manipulated using $this->rooms[$params['id']][$params['field']] = $params['value']; line. This line of code directly changes the specific room’s field (either ‘name‘ or ‘description‘) in the $rooms array held by the Houses component.