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>

You probably don't want to both mount and hydrate like that. — ceejayoz
– ceejayoz, Commented Mar 8, 2021 at 3:32
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. — Jeche
– Jeche, Commented Mar 8, 2021 at 5:15
Possible cause : Livewire trim the strings between requests. If you have a string like this hello or hello\n you will likely get a corrupted data because the hash will not be the same. — Clément Baconnier
– Clément Baconnier, Commented Mar 8, 2021 at 8:06
@Jeche if my answer below worked please, considering upvoting and mark as correct. If not, put comments there, so I improve my answer. — Vinícius Fagundes
– Vinícius Fagundes, Commented Jun 24, 2021 at 17:42

Vinícius Fagundes · Accepted Answer · 2021-06-23 05:11:43Z

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.

Collectives™ on Stack Overflow

Laravel Livewire json response

1 Answer 1

Asked and Answered

Short Answer

Long Answer

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Asked and Answered

Short Answer

Long Answer

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related