Input checkbox returning value=[object Object] instead of scalar

Hi folks - I can't remember how to solve this problem and hope you can help:

I have a foreach:

foreach($rows AS $row){

where the $row is:

{#2274 ▼ // resources\views/components/tables/participatingSchoolsTable.blade.php
  +"schoolName": "Central Junior/senior High School"
  +"schoolId": 955
  +"prefix_name": null
  +"last_name": "Swanson"
  +"middle_name": ""
  +"first_name": "Jimmy"
  +"suffix_name": null
  +"name": "Jimmy Swanson"
  +"email": "[email protected]"
  +"candidateCount": 2
  +"phoneMobile": "(888) 555-1212 "
  +"phoneWork": "(888) 555-1313"
}

and an input checkbox as follows:

<input type="checkbox"
       value="{{ $row->schoolId }}"
       wire:model="versionPackageReceiveds"
       wire:click="packageReceived({{ $row->schoolId }})"
/>

My problem is that the inspection item returns:

<input type="checkbox" value="[object Object]" wire:model="versionPackageReceiveds" wire:click="packageReceived(955)">

and I don't understand why value="[object Object]" but wire:click="packageRreceived(955)" when I need value="955" as well. Thanks for your help!

LaryAI

1 year ago

Level 58

The issue you're encountering is likely due to the way the value attribute is being set in your Blade template. The value attribute should be a scalar value, such as a string or a number, but it seems like it's being set to an object instead.

Here's a checklist to help you troubleshoot and resolve the issue:

Ensure Correct Data Type: Double-check that $row->schoolId is indeed a scalar value (like an integer or string) and not an object. From your description, it seems like it should be a number, but it's always good to verify.

Blade Syntax: Make sure the Blade syntax is correctly outputting the value. The code you provided seems correct, but let's ensure there are no hidden issues:

<input type="checkbox"
       value="{{ $row->schoolId }}"
       wire:model="versionPackageReceiveds"
       wire:click="packageReceived({{ $row->schoolId }})"
/>

Check for JavaScript Interference: If you have any JavaScript that might be manipulating the DOM or the values of these inputs, ensure that it's not inadvertently setting the value to an object.
Livewire Component: If you're using Livewire, ensure that the versionPackageReceiveds property is correctly defined in your Livewire component and that it expects a scalar value.

Debugging: Add some debugging output to verify the type and value of $row->schoolId:

<input type="checkbox"
       value="{{ $row->schoolId }}"
       wire:model="versionPackageReceiveds"
       wire:click="packageReceived({{ $row->schoolId }})"
/>
<p>School ID: {{ $row->schoolId }} (Type: {{ gettype($row->schoolId) }})</p>

This will help you confirm that $row->schoolId is indeed what you expect it to be.

By following these steps, you should be able to identify and resolve the issue with the checkbox value being set to [object Object]. If the problem persists, consider checking the data source or any transformations applied to $row before it reaches the Blade template.

Rretzko

1 year ago

Level 15

I added the troubleshooting script and it returned:

School ID: 955 (Type: integer)

Rretzko

1 year ago

Best Answer

Level 15

OK, got it thanks to an old post by @MarianoMoreyra (livewire checkboxes array with pluck).

Here's the corrected code in case it will help anyone else:

<input type="checkbox"
                           wire:model="versionPackageReceiveds.{{ $row->schoolId }}"
                           wire:click="packageReceived({{ $row->schoolId }})"
                           @checked(array_key_exists($row->schoolId, $versionPackageReceiveds) && ($versionPackageReceiveds[$row->schoolId] == 1))
                    />

Please or to participate in this conversation.