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.