How to display array data using wire model inside text field

#1

What seems to be the problem: I have a array of data that I want to display inside the text field using wire model. The array is:

    $invoice_items => array:2 [
    0 => array: 3 [
       "name" => "Apple"
       "qty" => "4"
       "price" => "3.50"
    ]
    1 => array: 3 [
       "name" => "Orange"
       "qty" => "2"
       "price" => "3.80"
    ]
    ]

In the blade file my code is

@forelse ($invoice_items as $index=> $value)
                <tr>
                    <td><input type="text" name="item[{{$index}}][name]" id="item[{{$index}}][name]" wire:model="invoice_items.{{$index}}.name" class="form-control form-control-sm"></td>
                    <td><input type="text" name="item[{{$index}}][qty]" id="item[{{$index}}][qty]" wire:model="invoice_items.{{$index}}.qty" class="form-control form-control-sm"></td>
                    <td><input type="text" name="item[{{$index}}][price]" id="item[{{$index}}][price]" wire:model="invoice_items.{{$index}}.price" class="form-control form-control-sm"></td>
                </tr>
@empty
@endforelse

However, there is no value display inside the text field.

Please help to advise where is wrong.

Are you using the latest version of Livewire: Yes

Thanks in advice

#2

Do you have a $rules property set on your Livewire component for those fields? Something like:

    protected $rules = [
        'invoice_items.*.name' => ['required', 'string', 'max:255'],
        'invoice_items.*.name' => ['required', 'integer', 'min:1', 'max:50'],
        'invoice_items.*.price' => ['required', 'numeric'],
    ];

I’ve never tried to do what you’re doing but I don’t see why it wouldn’t work.

#3

Hi, I did not set any rules for the data yet. Could this be the problem?

#4

Just found out the cause is that I had 2 root components and after combined, everything is ok. Thanks for the help

#5

Hello

Can You describe that how You solved the issue please?! I have similar problem at hand ! Thanks a lot

#6

Code Component

public $invoice_items = [
	[
	   "name" => "Apple",
	   "qty" => "4",
	   "price" => "3.50"
	],
	[
	   "name" => "Orange",
	   "qty" => "2",
	   "price" => "3.80"
	]
];

Component View Blade

<table>
  @forelse ($invoice_items as $index=> $value)
  <tr>
	<td><input type="text" name="item-{{$index}}-name" id="item.{{$index}}.name" wire:model="invoice_items.{{$index}}.name" class="form-control form-control-sm"></td>
	<td><input type="text" name="item-{{$index}}-qty" id="item{{$index}}qty" wire:model="invoice_items.{{$index}}.qty" class="form-control form-control-sm"></td>
	<td><input type="text" name="item-{{$index}}-price" id="item_{{$index}}_price" wire:model="invoice_items.{{$index}}.price" class="form-control form-control-sm"></td>
  </tr>
  @empty
  <span>Sorry. Is empty!</span>
  @endforelse
</table>

if you notice i put three different ways of defining the ids so that you can see that this is just a text and that you can choose the best way in your case

Result:

Screenshot_1
Screenshot_1732×71 3.68 KB

1 Like
Binded array variable values are not shown on the blade component
#7

Thanks a lot for your effort ! I solved ! See in my post ! :slight_smile:

1 Like
#8

Thanks really you saved my time.