Laravel Livewire json 响应

Question

我在使用 Livewire 将数据从 api 响应传递到组件 blade 文件时遇到严重问题。起初它加载正常，我点击的那一刻。下拉菜单会在下方抛出错误。

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.

我有一个正在加载专业的下拉菜单，一开始它加载得很好，但是当我从下拉菜单中 select 一些东西时，它抛出了那个错误。

下面是我的组件代码

    <?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
        ]);
    }
}

下面是我的组件 blade 下拉菜单

<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

提问和回答

您已经提示了您的问题。

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.

简答

将 collection 转换为 array。

长答案

您可能只需要将您的 collection 转换为数组：

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

更进一步，我注意到您只需要来自专业人士的 description 和 id。所以你只需要return那个：

    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();
    }

当然，你需要相应地调整blade：

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

注意我没有亲自测试代码，所以也许你需要做一些调整。请在评论中告诉我，以便我改进我的答案。

Laravel Livewire json 响应

Laravel Livewire json response

php

laravel

laravel-livewire

提问和回答

简答

长答案