Livewire: I'm getting this error message: "Cannot assign array to property App\Livewire\ToggleButton..."

Hy Guys,

I'm getting this error message:

"Cannot assign array to property App\Livewire\ToggleButton::$model of type Illuminate\Database\Eloquent\Model"

Below are the code lines.

edit-setup.blade.php

<tbody class="bg-white">
@foreach ($tetrazolios as $index => $tetrazolio)

    <tr>

        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500 text-sm leading-5">
            @if ($editedTetrazolioIndex === $index || $editedTetrazolioField === $index . '.limit')
                <input type="text"
                       wire:model="tetrazolios.{{ $index }}.limit"
                    @class([
                         'mt-2 text-sm sm:text-base pl-2 pr-4 rounded-lg border w-full py-2 focus:outline-none focus:border-blue-400',
                         'border-red-500' => $errors->has('tetrazolios.' . $index . '.name'),
                         'border-gray-400' => ! $errors->has('tetrazolios.' . $index . '.name'),
                    ])
                />
                @error('$tetrazolios.' . $index . '.limit')
                    <div class="text-red-500 mt-1">{{ $message }}</div>
                @enderror
            @else
                <div class="cursor-pointer" wire:click="editTetrazolioField({{ $index }}, 'limit')">
                    {{ $tetrazolio['limit'] }}
                </div>
            @endif
        </td>

        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500 text-sm leading-5">
            @if ($editedTetrazolioIndex === $index || $editedTetrazolioField === $index . '.weight')
                <input type="text"
                       wire:model="tetrazolios.{{ $index }}.weight"
                    @class([
                         'mt-2 text-sm sm:text-base pl-2 pr-4 rounded-lg border w-full py-2 focus:outline-none focus:border-blue-400',
                         'border-red-500' => $errors->has('tetrazolios.' . $index . '.name'),
                         'border-gray-400' => ! $errors->has('tetrazolios.' . $index . '.name'),
                    ])
                />
                @error('tetrazolios.' . $index . '.weight')
                <span class="text-red-500 mt-1">{{ $message }}</span>
                @enderror
            @else
                <div class="cursor-pointer" wire:click="editTetrazolioField({{ $index }}, 'weight')">
                    {{ $tetrazolio['weight'] }}
                </div>
            @endif
        </td>


        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500 text-sm leading-5">
            <livewire:toggle-button
                :model="$tetrazolio"
                field="enabled"
            />
        </td>

        <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500 text-sm leading-5">
            @if($editedTetrazolioIndex === $index || (isset($editedTetrazolioField) && (int)(explode('.',$editedTetrazolioField)[0])===$index))
                <button
                    class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150"
                    wire:click="saveTetrazolio({{$index}})">
                    Salva
                </button>
            @else
                <button
                    class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150"
                    wire:click="editTetrazolio({{$index}})">
                    Edita
                </button>
            @endif
        </td>
    </tr>

@endforeach
</tbody>

App/Livewire/ToggleButton.php

<?php

namespace App\Livewire;

use Illuminate\Contracts\View\View;
use Illuminate\Database\Eloquent\Model;
use Livewire\Component;

class ToggleButton extends Component
{
    public Model $model;

    public string $field;

    public bool $enabled;

    public function mount(): void
    {
        $this->enabled = (bool) $this->model->getAttribute($this->field);
    }

    public function render(): View
    {
        return view('livewire.toggle-button');
    }

    public function updating($field, $value): void
    {
        $this->model->setAttribute($this->field, $value)->save();
    }
}

var_dump $tetrazolio

array:10 [▼ // resources\views/livewire/admin/setups/edit-setup.blade.php
  "id" => 271
  "setup_id" => 9
  "company_id" => 1
  "tetrazolio_id" => 1
  "step" => "1"
  "limit" => "90"
  "weight" => "25"
  "enabled" => 1
  "created_at" => "2024-06-21T20:00:49.000000Z"
  "updated_at" => "2024-07-01T12:41:37.000000Z"
]

I want to implement Tailwind Toggle Switch to enable and disable a record.

This speaks for itself, no? You're trying to assign an array ($tetrazolio) to a property of type Model. You simply cannot do that. To fix this, either ensure $tetrazolio is a Model, or you pass it to the mount function to manually convert it to a Model:

public function mount(array $tetrazolio)
{
    $this->model = Tetrazolio::find($tetrazolio['id']);
}

<livewire:toggle-button
    :tetrazolio="$tetrazolio"
    field="enabled"
/>