Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example of logging Laravel Livewiure component state
<script src="{{ asset('js/app.js') }}"></script>
<script>
let logComponentsData = function () {
window.livewire.components.components().forEach(component => {
console.log(component.name);
console.log(component.data);
});
};
document.addEventListener("livewire:load", function(event) {
logComponentsData();
window.livewire.hook('afterDomUpdate', () => {
logComponentsData();
});
});
</script>
@Braunson

This comment has been minimized.

Copy link

@Braunson Braunson commented Oct 16, 2020

Updated version for Livewire 2.x:

<script>
    let logComponentsData = function () {
        Livewire.components.components().forEach(component => {
            console.log("%cComponent: " + component.name, "font-weight:bold");
            console.log(component.data);
        });
    };

    document.addEventListener("livewire:load", function(event) {
        logComponentsData();

        Livewire.hook('message.processed', (message, component) => {
            logComponentsData();
        });
    });
</script>
@mattstauffer

This comment has been minimized.

Copy link
Owner Author

@mattstauffer mattstauffer commented Oct 20, 2020

Thanks @Braunson!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment