laravel Livewire updating specific category on multiple dropdowns

Question

I am trying to update a table field using dropdowns. I have made it work with only a single row of data but I am having trouble getting livewire to follow the rows. I think this is where I should be looking but I am not following on what to do. https://laravel-livewire.com/docs/2.x/nesting-components

[screen cap of first three rows][1] [1]: https://i.sstatic.net/znG96.png The first dropdown is basically a class of categories and the second dropdown is the specific category that I want to assign to the transaction.

main view

@livewire('transaction-category', ['types'=>$types], key($types->type))

component

<div>
    <td class="border" >
        <select name="types" wire:model="types" class="inv_select ">
            <option value=''>Choose Category Class</option>
            @foreach($types as $t)
                <option value={{ $t->type }}>{{ $t->type }}</option>
            @endforeach
        </select>
    </td>
    //@if(count($subclass>0)
    <td>
        <select name="subclass" wire:model="subclass" class="inv_select">
            <option value=''>Choose Category</option>
            @foreach($subclass as $s)
                <option value={{ $s->type }}>{{ $s->type }}</option>
            @endforeach
        </select>
    </td>
    //@endif
</div>

Livewire Model

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Category;

class TransactionCategory extends Component
{
    public $types;
    public $subclass=[];
    
    public function mount(){
        $this->types=Category::select('type')->groupby('type')->get();

    }
    public function updatedTypes(){
        dd($this->subclass =Category::subs($this->types));
        $this->subclass =Category::subs($this->types);
    }
    public function render()
    {           
        return view('livewire.transaction-category');     
    }  
}

Answer 1

You need to understand better what livewire means about public properties and the difference between collections. I'm not clear about what model your table loops over, so I´m going to assume is about a transaction model.

My approach here first with

@livewire('transaction-category', ['transaction' => $transaction], key($transaction->id))

public Transaction $transaction;
public $selectedType, $selectedSub;
public $types, $subclass;

public function mount(){
  // I'm going to improve with your code
  $this->types = Category::all();
  $this->subclass = Collection()->empty();
}
public function updatedSelectedType($value)
{
  if($value) {
    $this->subclass = Category::subs($this->types)->get();
  } else {
    $this->subclass = Collection()->empty();
  }
}

and the blade elements

<div>
    <td class="border" >
        <select name="types" wire:model="selectedType" class="inv_select ">
            <option value=''>Choose Category Class</option>
            @foreach($types as $t)
                <option value={{ $t->type }}>{{ $t->type }}</option>
            @endforeach
        </select>
    </td>
    @if(count($subclass))
    <td>
        <select name="subclass" wire:model="selectedSub" class="inv_select">
            <option value=''>Choose Category</option>
            @foreach($subclass as $s)
                <option value={{ $s->type }}>{{ $s->type }}</option>
            @endforeach
        </select>
    </td>
    @endif
</div>