How to Sum every rows data in dinamic field input Laravel Livewire

Question

I have input with dynamic field so I can add more columns and remove it. In this input I have a column total_price, on price I need price * qty . But I don't know how do this on multiple input. I just can do this on single input. My form and livewire like this :

1. form

      <form>
        <button wire:click.prevent="add({{$i}})">
        Add 
        </button>
   
        <input type="hidden" wire:model="newid.0">
   
        <input wire:model="nama_barang.0" type="text" />
        <input wire:model="qtt.0" type="text" />
        <input wire:model="price.0" type="text" />
        <input wire:model="qty.0" type="text" /> 
        <input wire:model="total_price" type="text" /> // here the problem
   
        @foreach($inputs as $key => $value)
        <input wire:model="nama_barang.{{ $value }}" type="text" />
        <input wire:model="qtt.{{ $value }}" type="text" />
        <input wire:model="price.{{ $value }}" type="text" />
        <input wire:model="qty.{{ $value }}" type="text" /> 
        <input wire:model="total_price" type="text" /> // on here i get the problem
   
        @endforeach
   
        <button wire:click.prevent="store()">Submit</button>
    </form>
   

and this is my livewire

public $belanja_id, $nama_barang, $qtt,$newid;
public $updateMode = false;
public $inputs = [];
public $i = 1;
public $total_price ;
public $price= [] ;
public $qty = [];

public function add($i)
{
    $i = $i + 1;
    $this->i = $i;
    array_push($this->inputs ,$i);
}

public function mount($id)
{
   $belanja = $this->belanja = Belanja::findOrFail($id);
   $this->newid = $belanja->id;
   $this->k_uraian = $belanja->uraian;

} 

public function remove($i)
{
    unset($this->inputs[$i]);
}

public function render()
{
    $this->total_price =array_sum($this->price) * array_sum($this->qty)   ; // i try with this but only get 1 rows , can someone help ?
    
    return view('livewire.input-belanja-lw');
}

and you can see my form on this picture (better u see this picture so u can know my problem) , i cant add sum total_price . so can someone help about this ?

my references is from this site site

UPDATE . my input is correct now but my store is have e error

its my store function

 public function store()
{
    

    foreach ($this->nama_barang as $key => $value) {
       $bel = AnakBelanja::create([
            'belanja_id' => $this->newid,
            'nama_barang' => $this->nama_barang[$key], 
            'qtt' => $this->qtt[$key],
            'price' => $this->price[$key],
            'qty' => $this->qty[$key]
            ]);        
    }

    $this->inputs = [];

    $this->resetInputFields();


    return redirect()->route('detail', $bel->belanja_id);

    $this->emit('alert', ['type' => 'success', 'message' =>'Succes Melakukan Input / Update']);

}

Answer 1

as your doing it is not possible so i have done some fixes try this

Component

public $belanja_id, $nama_barang, $qtt, $newid;
public $updateMode = false;
public $inputs = [
    [
        "newid" => "",
        "nama_barang" => "",
        "qtt" => "",
        "price" => "",
        "qty" => "",
        "total_price" => "",
    ]
];

public function render()
{
    return view('livewire.input-belanja-lw');
}

public function add()
{
    array_push($this->inputs, [
        "newid" => "",
        "nama_barang" => "",
        "qtt" => "",
        "price" => "",
        "qty" => "",
        "total_price" => "",
    ]);
}

public function mount($id)
{
    $belanja = $this->belanja = Belanja::findOrFail($id);
    $this->newid = $belanja->id;
    $this->k_uraian = $belanja->uraian;
}

public function remove($i)
{
    unset($this->inputs[$i]);
}

Blade

<form>
    <button wire:click.prevent="add()">
        Add
    </button>

    @foreach($inputs as $key => $value)
    <input type="hidden" wire:model="inputs.{{ $key }}.newid" value="{{ $key }}">
    <input wire:model="inputs.{{ $key }}.nama_barang" type="text" />
    <input wire:model="inputs.{{ $key }}.qtt" type="text" />
    <input wire:model="inputs.{{ $key }}.price" type="text" />
    <input wire:model="inputs.{{ $key }}.qty" type="text" />
    <input value="{{ (int)$value['price'] * (int)$value['qty']  }}" type="text" />
    <br>
    @endforeach

    <button wire:click.prevent="store()">Submit</button>
</form>