Laravel Livewire json 响应答案

【问题标题】：Laravel Livewire json responseLaravel Livewire json 响应
【发布时间】：2021-06-05 23:42:18
【问题描述】：

我在将来自 api 响应的数据传递到组件刀片文件时遇到了 Livewire 的严重问题。起初它加载很好，我点击的那一刻。下拉它会在下面引发错误。

Livewire 在尝试对 [注册] 组件进行水合时遇到损坏的数据。确保 Livewire 组件的 [name, id, data] 在请求之间没有被篡改。

我有一个正在加载职业的下拉菜单，起初它加载正常，但是当我从下拉列表中选择某些内容时，它会抛出该错误。

下面是我的组件代码

    <?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>

【问题讨论】：

你可能不希望mount 和hydrate 都这样。
甚至。如果我删除它们，它仍然是一样的。
Livewire 组件的 [sign-up] 公共属性 [prefixes] 的类型必须为：[numeric、string、array、null 或 boolean]。只有受保护或私有属性可以设置为其他类型，因为 JavaScript 不需要访问它们。
可能的原因：Livewire 修剪请求之间的字符串。如果你有一个像hello 或hello\n 这样的字符串，你可能会得到一个损坏的数据，因为哈希值不一样。
@Jeche 如果我在下面的回答有效，请考虑投票并标记为正确。如果没有，请将 cmets 放在那里，以便我改进我的答案。

标签： php laravel laravel-livewire

【解决方案1】：

问与答

你已经给出了关于你的问题的提示。

Livewire 组件的 [sign-up] 公共属性 [prefixes] 必须是以下类型：[numeric、string、array、null 或 boolean]。只有受保护或私有属性可以设置为其他类型，因为 JavaScript 不需要访问它们。

简答

将collection 转换为array。

长答案

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

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

再进一步，我注意到您只需要来自专业人士的description 和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

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

【讨论】：