Level 63
I have the same problem, it seems to be a bug.
1 like
Aug 2, 2023
15
Level 1
Livewire 3: Cannot mutate reactive prop [comment] in component: [post.comments]
app/Livewire/Post/Show.php
<?php
namespace App\Livewire\Post;
use Livewire\Component;
use App\Models\Post;
class Show extends Component
{
public Post $post;
public function render()
{
return view('livewire.post.show');
}
}
resources/views/livewire/post/show.blade.php
<div class="mt-8">
@foreach($post->comments as $comment)
<livewire:post.comments wire:key="{{ $comment->id }}" :$comment />
@endforeach
</div>
<div class="mt-8">
<livewire:post.create-comment :$post />
</div>
app/Livewire/Post/Comments.php
<?php
namespace App\Livewire\Post;
use Livewire\Attributes\Reactive;
use Livewire\Component;
class Comments extends Component
{
#[Reactive]
public $comment;
public function render()
{
return view('livewire.post.comments');
}
}
resources/views/livewire/post/comments.blade.php
<div>
<div class="bg-white dark:bg-gray-700 p-4 my-4 shadow-lg rounded-lg">
<div class="text-gray-800 dark:text-white">
<strong>{{ $comment->user->name }}</strong>
<p>{{ $comment->content }}</p>
</div>
<div class="text-gray-600 dark:text-gray-400 text-sm mt-2">
{{ $comment->created_at->diffForHumans() }}
</div>
</div>
</div>
Level 4
I think #[Reactive] is only one way (parent to child) so when you try to update from child , it conflicts
2 likes
Level 63
@nam_co Does it work for you ? It doesn't work in my app.
1 like
Level 1
@nam_co i have try this but i got this error
Cannot mutate reactive prop [comments] in component: [post.show]
<?php
namespace App\Livewire\Post;
use Livewire\Attributes\Reactive;
use Livewire\Component;
use App\Models\Post;
class Show extends Component
{
public Post $post;
#[Reactive]
public $comments;
public function mount(Post $post)
{
$this->comments = $post->comments;
}
public function render()
{
return view('livewire.post.show');
}
}
2 likes
Level 17
@vincent15000 I have the same problem brothers (
1 like
Level 63
@Abduqodir Read the other comments of this post, you will have the answer.
2 likes
Level 17
@vincent15000 Thank you! )
1 like
Level 1
@bennajah Use Modelable bro.
Level 8
Same problem here. Followed the livewire 3 documentation and got stuck on Cannot mutate reactive prop [posts] in component: [list-posts]
Just create a component where a list of posts is updated every time you create one... followed Philo Hermans "Let's take a look at Livewire v3" youtube video to separate the list component and add it to the form one...
2 likes
Level 5
Same issue... I can not use #[Reactive] on any value with out getting 'Cannot mutate reactive prop [points] in component' error
2 likes
Level 63
@tvoitik I received an answer on github : the reactive attribute only work when you need that the parent updates a child property, but it doesn't work if the child tries to update a parent property.
If you need that it works from the parent to the child and from the child to the parent, you have to use the modelable attribute.
3 likes
Level 1
any solutions?
1 like
Level 9
Hi. You should have loaded all relation before rendering .
3 likes
Level 25
passing :$comment as an array solves the error
1 like
Level 63
@radd2004 But $comment is a text, not an array.
In the code, I see a lot of confusion among the namings (Comments class, $comment, $comments) with plural or singular, and sometimes plural whereas it should be singular.
Please or to participate in this conversation.