skip to Main Content

I have a Livewire Component "UpdateCategory" in which I am passing the "category" as prop.
In "UpdateCategory" component mount method I am initializing a public property "category" and trying to bind category.name to an input field but it is not working.

It throws the following error: Uncaught TypeError: Cannot read properties of null (reading 'name')

My Code:

category.blade.php

<x-feathericon-edit wire:click.prevent="updateCategory({{ $category->id }})" class="w-5 h-5 text-blue-700 cursor-pointer" />

<livewire:admin.categories.update-category :show="$showUpdateModal" :category="$selectedCategory" />

Category.php

public bool $showUpdateModal = false;

public ?Category $selectedCategory;

public function updateCategory(Category $category)
{
    $this->selectedCategory = $category;
    $this->showUpdateModal = true;
    $this->dispatch('open-modal', 'update-category');
}

UpdateCategory.php

public Category $category;

public function mount(Category $category)
{
    $this->category = $category;
}

update-cateogry.blade.php

<x-text-input
    id="name"
    type="text"
    class="mt-1 block w-3/4"
    placeholder="{{ __('Category Name') }}"
    wire:model.live="category.name"
/>
                        

<p class="mt-4 text-sm text-gray-500">{{ $category->name}}<p>
<p class="mt-4 text-sm text-gray-500">{{ $category->slug }}<p>

The strange thing is that the name & slug in the paragraph is printed properly but the binding is not working.

2

Answers


  1. This is all extremely well documented and explained in the official Livewire 3 documentation.

    I think you are becoming confused with which component you are talking to, to be honest.

    You are opening a new component, but not passing anything to the mount function, so it’s unaware of anything that has happened before.

    I strongly suggest, in the kindest possible way, that you review the docs that are published.

    Alternatively, there are a large number of available freelancers (I am not one of them) available if you post on the Livewire Discord.
    There’s also a large community in the Discord Help channel, and you may get some answers there.

    Login or Signup to reply.
  2. You’re trying to do model binding on a function call. Livewire doesn’t work that way. It even gives examples in the docs where it’s clear you need to do your own model resolving when using actions, unless you happen to perform your action on a model property, aka one that is being hydrated by Livewire.

    So, simply stated:

    public function updateCategory(int $categoryId)
    {
        $category = Categorory::findOrFail($categoryId);
        // 
    
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search