Nested components issue

#1

What seems to be the problem:

i am having nested components for comments and like/dislikes for that comments below

Parent component :- comments
child component :- likes/dislikes of comments

but whenever i add new comment, my likes/dislikes component shits to first comment and submit button dose not work after that

Steps to Reproduce:

Are you using the latest version of Livewire: latest

Do you have any screenshots or code examples:
looks like this in the beginning…

image
image1180×792 58 KB

but as soon as i started typing comment, like button shifts and post button freezes

image
image877×796 48.9 KB

#2

Note :- adding child component into foreach loop so that for each comment user can like likebutton

#3

Hi!
did you given ID for each nested wire:modell ?
eg: @livewire(‘input.insel’,[‘fieldname_cost_id’=>‘cost_id’],key(‘cost_id’))

1 Like
#4

Hey, @moreshwar

Is there any code example?

If you want to make a look against livewire components you must be aware of the keys

For more info see this on [Keeping Track Of Components In A Loop] section

1 Like
#5

thanks, I used key , missed it earlier

<livewire:comment-likes :comment="$comment" :key="$comment->id">

it solves this problem but now My comment input is not getting blank again when I enter comment…

need to manually refresh page, earlier this was possible

my new comment method

public function newComment () {

$this->newComment = commentPosting::create([‘body’ => $this->body, ‘user_id’ => $this->user_id, ‘tweets_id’ => $this->tweets_id]);

//$this->comment = ($this->body);

$this->comments->prepend($this->newComment);

$this->body = '';
#6

it works, thanks. now only my comment box is not going empty… should i use hooks on child class to release it ? any idea

#7

Hey, @moreshwar

Which comment box exactly, can you show us a code example?

#8

Just make sure you have keyed it all properly using unique keys. Example:

Comment Loop:

@foreach($comments as $comment)
    @livewire(‘comment-component’, [‘comment’ => $comment], key(“comment-{$comment->id}”))
@endforeach

Comment Component:

<div>
    @livewire(`like-dislike-component’ , [‘comment’ => $comment], key(“comment-{$comment->id}-like-dislike”)
</div>

Key can be whatever just make sure it’s always unique and not just using the ID.