Question 349190 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel Livewire: Uncaught TypeError: Cannot read properties of null (reading 'code')

Why am I getting this error when $client is object is clearly not null..?

Blade


<div class="max-w-md mx-auto">
        <div class="bg-white shadow-md rounded px-4 pt-6 pb-4 mb-4">
        {{json_encode($client)}}
        <div class="mb-4">
            <label for="code" class="block text-gray-700 text-sm font-bold mb-2">Code:</label>
            <input type="text" wire:model="client.code" id="code" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" @unless($editMode) readonly @endunless>
        </div>
        <div class="mb-4">
            <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
            <input type="text" wire:model="client.name" id="name" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" @unless($editMode) readonly @endunless>
        </div>
        <div class="mb-6">
            <label for="office_address" class="block text-gray-700 text-sm font-bold mb-2">Office Address:</label>
            <input type="text" wire:model="client.office_address" id="office_address" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" @unless($editMode) readonly @endunless>
        </div>
        <div class="flex items-center justify-between">
            <x-solid-button type="button" background="text-gray-900 bg-white border border-yellow-300 hover:bg-yellow-100 w-20" action="livewire" link="toggleEditMode"
                            component="">
                {{ $editMode ? 'Save' : 'Edit' }}
            </x-solid-button>
            @if ($editMode)
                <button wire:click="cancelEdit" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                    Cancel
                </button>
            @endif
        </div>
    </div>
    </div>

Livewire Component

<?php

namespace AppLivewireClients;

use LivewireComponent;

class Details extends Component
{
    public object $client;
    public bool $editMode = false;

    public function mount($client)
    {
        $this->client = (object) $client;
    }

    public function toggleEditMode()
    {
        $this->editMode = !$this->editMode;
    }

    public function render()
    {
        return view('livewire.clients.details');
    }

    public function cancelEdit()
    {
        $this->editMode = false;
    }
}

I am getting the client data on the page when I use json_encode($client) to view it. But why am I still getting the error..

I couldn’t find any solid solution on the internet..what am I missing?

I am using livewire version 3.0

Check The Image

Tags:

2

Answers


  1. 0

    The issue is $client has been declared but not initialised.

    The first option is to update your mount to something like this:

     public function mount($client = null)
    {
        
        $clientArray = is_array($client) ? $client : [];
        $defaultClient = [
            'items' => $clientArray['name'] ?? '', 
            'code' => $clientArray['code'] ?? '', 
            'office_address' => $clientArray['office_address'] ?? '', 
        ];

        $this->client = (object) $defaultClient;
    }

    Or declare each element separately:

    In your Livewire Component:

    ...
public object $code;
public object $name;
public object $office_address;
...

    In your Blade View:

    ...
        <div class="mb-4">
            <label for="code" class="block text-gray-700 text-sm font-bold mb-2">Code:</label>
            <input type="text" wire:model="code" id="code" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" @unless($editMode) readonly @endunless>
        </div>
        <div class="mb-4">
            <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
            <input type="text" wire:model="name" id="name" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" @unless($editMode) readonly @endunless>
        </div>
        <div class="mb-6">
            <label for="office_address" class="block text-gray-700 text-sm font-bold mb-2">Office Address:</label>
            <input type="text" wire:model="office_address" id="office_address" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" @unless($editMode) readonly @endunless>
        </div>
...
    Login or Signup to reply.
  2. 0

    According to the docs, object is not directly supported as property. You’re also using wire:model to directly bind to it. Have you tried storing it as array instead?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search