Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

zerosAndOnes's avatar

Use different wire:models for for input

Hello guys,

I need help figuring out how to solve this (if it is possible).

I have an array of comments, and I am looping through it , and under each comment, I have an input field where people can reply to a comment.

Problem is: when you type in one input field, the other input fields update as well. I have tried giving them different models by appending the comment ID to them, but I am not able to figure out a way to update the public variable for this model. I also think this is a wrong approach.

Anyone know any better method to tackle this?

<div>
    @foreach ($comments as $comment)
        <h5> {{$comment->text}}</h5>
		<div class="input-group mb-3">
            <textarea rows="1" wire:model="replyToComment"></textarea> //I tried wire:model="replyToComment{{$comment->id}}" but the variable couldn't be updated in the livewire php file
        </div>
    @endforeach

     
</div>
0 likes
9 replies
Nakov's avatar

First of all, I think it is not a good approach to allow the user to reply to multiple comments at the same time before hitting save. And each of the replies can be a separate components, that way each one will handle it's own state.

Now to answer your try from above, you cannot have $replyToComment variable, and then append just the comment id, you will need to store the replies in an array and then loop through it in order to store the replies:

// in component
public $repliesToComments = [];

// and to save them in a function you'll add
foreach($this->repliesToComments as $commentId => $message)
{
   // you got the id and the message here.
}

// in view
<div>
    @foreach ($comments as $comment)
        <h5> {{$comment->text}}</h5>
		<div class="input-group mb-3">
            <textarea rows="1" wire:model="repliesToComments[{{$comment->id}}]"></textarea>
        </div>
    @endforeach
</div>

But make sure you consider my initial comments above, as that makes more sense.

zerosAndOnes's avatar

@Nakov Hello Nakov, and thanks for your response.

The thing is: I am able to store the user comments properly, but because I am using one input for the comments section, and I am using bootstrap collapse to hide responses to a comment, if a user collapses all the hidden section and starts to type in the textarea field, it will be seen in all of them, but when the user saves the post/reply, only the right comment will saved as the comment_id.

So what I was trying to do was not show the user typed texts in other inputs, while using same wire:model.

Nakov's avatar

@cyberkid007 So what I am saying above is, each of your sections/comments should be a separate Livewire component.

zerosAndOnes's avatar

@Nakov Maybe I am not getting you correctly, but I don't know the number of comments that will be there for me to create the matching number of components.

Nakov's avatar
Nakov
4 years ago
Best Answer
Level 73

@cyberkid007 you don't need to know the number of comments, I am not saying you should create a component for each comment, but each component should be separate comment. For example:

class Comment extends Component
{
    public $comment;

    public $reply;

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

    public function save()
    {
		 // save the $reply for this comment only here
    }

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

then when you show all the comments you do this:

@foreach($comments as $comment)
    @livewire('comment', ['comment' => $comment])
@endforeach

You see? That's what One component for each comment means.

zerosAndOnes's avatar

@Nakov Thanks for the help. The method helped with the wire:model issue, it just broke some bootstrap functionalities.

But thanks a lot!

CODE-AXION's avatar

@cyberkid007 heyy please help me i am having the same problem how do i achieve this ? i would be so so thankfull if you would help me

Snapey's avatar

@CODE-AXION if you are having the exact same problem, follow the exact same advice

otherwise start your own question with your own situation

Please or to participate in this conversation.