Issue in working with nested component

What seems to be the problem:
I have done nesting of two component. Once component is load listing and second child is like button on it.
Now i want to execute a piece of code in javascript ONLY when parent component is refresh or re-render.On refresh of child component i don’t want to execute that code.

Please if is there any wayout,let me know. @shortbrownman

Steps to Reproduce:

Are you using the latest version of Livewire:

Do you have any screenshots or code examples:
Simply i want to scoll up page on parent component refresh

One quick idea is when parent is re-rendering - emit “parent-refresh-event” and when child is re-rendering emit “child-refresh-event” and listen in JS for those specific events.

And … try to post some code to illustrate your problem, especially JS bit.

You can hook into the updated() method of your component lifecycle to have your code execute on update. And not on first render:

It might be a bit more difficult as you’re wanting to execute JS on refresh. You may want to use $this->dispatchBrowserEvent('js-event') to trigger your JS code. I tried to find the docs on this method but I don’t think it’s in the docs yet. Basically, it will call the js-event and if you have something in javascript land listening for that event, it can run a method.

I’m just typing out the following from my head and if I have some time a little later, I’ll test to make sure it works but to get you started:


public function updated()

    <div x-data="appData()" x-on:js-event.window="jsMethod()">
        <!-- HTML -->
        <livewire:child-component />

function appData()
    return {
        jsMethod() {
            // your code

This is Alpine but you can use whatever JS you’re comfortable with. x-on is listening for js-event on window and will trigger jsMethod() when the event is raised.

Your child component shouldn’t kick up anything that will trigger a refresh on the parent component.