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
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.
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: