wire model does not receive the information

Question

I am making a comment system, livewire works correctly in other parts of the system but when I want to edit a comment the wire:model does not receive the information, however if I print the variable on the view it shows it correctly.

I show the code of the component:

public $editComment;


    public function edit(Comment $comment)
    {
        $this->editComment = $comment;

    }

    public function mount()
    {
         $this->editComment = new Comment();
    }

I show the view :

   @if($comment->user_id == Auth::user()->id)
      <i title="Editar mensaje" wire:click="edit({{$comment}})" class="fas fa-edit"></i>
      <i wire:click.prevent="confirmDelete({{$comment}})" title="Borrar mensaje" class="far fa-trash-alt"></i>
   @endif
 </div>
    
  @if($comment->id == $editComment->id)
    {{$editComment}} {{-- Here it shows it correctly --}}
        <form wire:submit.prevent="update">
           <input wire:model="editComment" type="text">

score 0 · Answer 1 · answered Feb 11 '21 at 16:42

0

I would guess that this is because $editComment is an object. When you use the {{ blade }} syntax it is cast to a string whereas in the wire:model it isn't, so you would have to wire:model to the property of Comment that contains the string.

<input wire:model="comment.string" />

Similarly your edit method expects a Comment, but will receive a string, so you probably need something like:

public function edit($comment)
{
  $this->editComment = new Comment($comment);
  // or something similar
}

answered Feb 11 '21 at 16:42

Mark Salmon

206
1
2
9

The component returns something like this: {"id":153,"comment":"Primer comentario","user_id":1,"commentable_id":1,"commentable_type":"App\\Models\\Post","parent_id":null,"created_at":"2021-02-11T07:24:43.000000Z","updated_at":"2021-02-11T07:24:43.000000Z"} . but when I try to access with the dot it doesn't work either ( wire:model="editComment.comment") – Alberto Feb 11 '21 at 17:08
If I try to create the new object as you suggest I get back the comment without id and I need the id to evaluate which input to edit. – Alberto Feb 11 '21 at 17:09

score 0 · Answer 2 · answered Feb 11 '21 at 20:18

From my point of view you are passing an object of comment in edit method. You should pass the id of that particular comment. Because you are accessing as Dependency Injection in edit method (Comment $comment) Like:

<i title="Editar mensaje" wire:click="edit({{$comment->id}})" class="fas fa-edit"></i>
<i wire:click.prevent="confirmDelete({{$comment->id}})" title="Borrar mensaje" class="far fa-trash-alt"></i>

Then in edit method:

    public function edit(Comment $comment)
    {
        $this->editComment = $comment->body;//or the column that holds the actual text of that comment

    }

2nd Solution is you can pass the actual body of the comment.And accessing it using a simple variable without Dependency Injection.

<i title="Editar mensaje" wire:click="edit({{$comment->body}})" class="fas fa-edit"></i>
    <i wire:click.prevent="confirmDelete({{$comment->id}})" title="Borrar mensaje" class="far fa-trash-alt"></i>

Then in edit method:

    public function edit( $comment)
    {
        $this->editComment = $comment;

    }

For me the second solution is more convenient.

score 0 · Answer 3 · answered Feb 16 '22 at 19:23

If the object can be printed then the missing piece are rules in your component

protected function rules(): array
{
    return [
        'editComment.comment' => [
            'string',
            'required',
        ],
        'editComment.user_id' => [
            'string',
            'required',
        ],
        'editComment.commentable_id' => [
            'string',
            'required',
        ],
        'editComment.commentable_type' => [
            'string',
            'required',
        ],
    ];
}

The function has been created according to the object structure provided in the comments in Mark's response. You can also check the documentation here

wire model does not receive the information

3 Answers3