Laravel Livewire json response

Question

i am having a serious problem with Livewire in passing data from an api response to the component blade file. At first it loads fine, the moment i click. the dropdown it throws an error below.

Livewire encountered corrupt data when trying to hydrate the [sign-up] component. Ensure that the [name, id, data] of the Livewire component wasn't tampered with between requests.

I have a dropdown that i am loading professions, it loads fine at first but the moment i select something fro the dropdown, it throws that error.

Below is my component code

    <?php

namespace App\Http\Livewire;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Guzzle\Http\Exception\ClientErrorResponseException;
use Livewire\Component;

class SignUp extends Component
{
    public $response = 0;
    public $data;
    //get all professions and their related prefixes
    public $professions;
    public $profession_id;
    public $prefix;

    public function mount()
    {
        $response = Http::get('http://localhost:8000/api/sign_up');
        $collection = json_decode($response);
        $this->professions = collect($collection->professions);
    }

    public function hydrate()
    {
        $response = Http::get('http://localhost:8000/api/sign_up');
        $collection = json_decode($response);
        $this->professions = collect($collection->professions);
    }


    public function render()
    {
        return view('livewire.sign-up', [
            'professions' => $this->professions
        ]);
    }
}

Below is my component blade dropdown

<div class="form-group">
                <select wire:model="profession_id" name="profession_id" class="form-control form-control-lg"
                        id="exampleFormControlSelect2">
                    <option value="">Choose Profession</option>
                    @foreach($professions as $profession)
                        <option value="{{$profession->id}}">{{$profession->description}}</option>
                    @endforeach

                </select>
            </div>

Answer 1

Asked and Answered

You already gave the tip about your problem.

Livewire component's [sign-up] public property [prefixes] must be of type: [numeric, string, array, null, or boolean]. Only protected or private properties can be set as other types because JavaScript doesn't need to access them.

Short Answer

Transform collection to array .

Long Answer

You probably only need to convert your collection to array:

    public function mount()
    {
        $response = Http::get('http://localhost:8000/api/sign_up');
        $collection = json_decode($response);
        $this->professions = collect($collection->professions)->all();
    }

Giving a step futher, I notice you only need description and id from professionals. So you only need to return that:

    public function mount()
    {
        $response = Http::get('http://localhost:8000/api/sign_up');
        $collection = json_decode($response);
        $this->professions = collect($collection->professions)->pluck('description', 'id')->all();
    }

Of course, you will need to ajust the blade correspondly:

@foreach($professions as $id => $desc)
   <option value="{{$id}}">{{$desc}}</option>
@endforeach

Notice I didn't test the code myself, so maybe you need to do some ajustments. Let me know on the comments, so I can improve my answer.