Issue in working with nested component

#1

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:
Yes

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

#2

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.

#3

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:

Component.php

public function updated()
{
    $this->dispatchBrowserEvent('js-event');
}

component.blade.php

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

<script>
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.