Laravel Livewire json响应

Question

我有一个严重的问题与Livewire从api响应传递数据到组件刀片文件。起初它加载良好，当我点击的时候。下拉列表会在下面抛出一个错误。

Livewire在尝试为[sign up]组件添加水合物时遇到损坏的数据。确保Livewire组件的[名称、id、数据]在请求之间未被篡改。

我有一个我正在加载的下拉列表，一开始它加载得很好，但当我从下拉列表中选择某个内容时，它抛出了那个错误。

下面是我的组件代码

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

下面是我的组件刀片下拉列表

<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组件的[sign up]公共属性[前缀]的类型必须为：[数字、字符串、数组、null或布尔]。只有受保护或私有属性可以设置为其他类型，因为JavaScript不需要访问它们。

将集合转换为数组。

您可能只需要将集合转换为数组：

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

更进一步，我注意到您只需要专业人士提供说明和id。因此，您只需返回：

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

当然，您需要相应地调整刀片：

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

注意，我没有亲自测试代码，所以可能需要做一些调整。让我知道这些评论，这样我可以改进我的答案。