Need help with an error with 2-Level Parent-Child Dependent Dropdowns

Hi!
livewire class Consumers.php

>     <?php
>     namespace App\Http\Livewire;
> 
>     [...skipped...]
> 
>     class Consumers extends Component {
>         public $consumers, $consumer_id, $name, $fullname, $ls, $inn, $kpp, $kvartira, $litera, $phone, $space, $type, $active;
>         public $homes, $home_id;
>         public $organizations, $organization_id;
>         public $user_id;
>         public $isOpen = true;
> 
>         public function mount() {
>             $this->organizations = Organization::all();
>             $this->user_id = Auth::id();
>             $this->homes = collect();
>             $this->home_id = 0;
>         }
> 
>         public function updatedOrganizationId($value) {
>             $this->homes = DB::table('homes')
>                 ->select('id', 'name')
>                 ->where('organization_id', '=', $this->organization_id)
>                 ->where('active', '=', true)
>                 ->get();
>         }
> 
>         public function updatedHomeId($value) {
>             $this->ls = DB::table('homes')
>                 ->select('prefix')
>                 ->where('id', '=', $this->home_id)
>                 ->value('prefix');
>         }
> 
>         public function render()    {
>             $this->consumers = DB::table('consumers')
> [...skipped...]
> >              return view('livewire.consumers');
>         }
>      }

livewire blade create-consumer.blade.php

<div class="container">
  <div class="row justify-content-md-center border bg-light">
    <div class="col-7">
      <form>
        @csrf
        <div class="form-row mb-2">
          <div class="col">
            <select wire:model="organization_id" class="form-control" name="organization_id">
              <option value="0">-- choose organization --</option>
              @foreach($organizations as $org)
              <option value="{{ $org->id }}">{{ $org->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="col">
            <select wire:model="home_id" class="form-control" name="home_id">
              <option 
                @if ($home_id == 0 ) selected @endif 
                value="0">-- choose building --</option>
                @foreach($homes as $hm)
                  <option value="{{ $hm->id }}">{{ $hm->name }}</option>
                @endforeach
            </select>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

after selecting organization and selecting Home get an error

Trying to get property 'id' of non-object (View: C:\laragon\www\bill2\resources\views\livewire\create-consumer.blade.php)
at <option value="{{ $hm->id }}">{{ $hm->name }}</option> Why?

but, for testing purpose, modifying render function, like

public function render()    {
        $this->homes = Home::all();
        return view('livewire.consumers');
}

and selecting different homes do not yield to an error

Try using the SELECT element to add keys, I had a similar problem

select wire:model=“home_id” class=“form-control” name=“home_id” wire:key="(rand(1000,2000)">

The DOM elements you need to understand who to contact. And sometimes there is a problem when organizing requests. I recommend that you do this in the action method

dd($value);

You want see model. This error talk to model hm = null

did you can make dd in updatedOrganizationId for $this->homes property?

adding wire:key did not help
dd($value); in updatedHomeId($value) shows right value

dd($this->homes); in updatedOrganizationId($value) shows right array of selected from database homes

this works fine. No errors.Bbut have one feature

 public function render()    {
            $this->consumers = DB::table('consumers')
                ->select('consumers.id')
                ->leftJoin('users', 'consumers.user_id', '=', 'users.id')
                ->leftJoin('homes', 'consumers.home_id', '=', 'homes.id')
                ->leftJoin('organizations', 'consumers.organization_id', '=', 'organizations.id')
                ->get();
            
            $this->homes = DB::table('homes')
                ->select('id', 'name')
                ->where('organization_id', '=', $this->organization_id)
                ->where('active', '=', true)
                ->get();

            return view('livewire.consumers');
        }

I added call Info() and
render

  • at the begining $homes is empty

updatedOrganizationId - selected an organization
here homes array
{“id”:1,“name”:“home 1”},
{“id”:2,“name”:“home 2”}

render
here homes array after updatedOrganizationId
{“id”:1,“name”:“home 1”},
{“id”:2,“name”:“home 2”}

updatedHomeId
1 -selected home 1 from selector
here homes array after updatedHomeId
{“id”:1,“name”:“home 1”},
{“id”:2,“name”:“home 2”}

render
here homes array when rendering the page
{“id”:1,“name”:“home 1”},
{“id”:2,“name”:“home 2”}
all the time $homes have ‘id’