Send Livewire data from component to JS library

Question

I have a livewire component that incorporates a js library, gridstack.js.

This is what I have so far and my interactive grid loads correctly. I'm able to adjust gridstack items on the page and save them to the database via $wire.taskMoved(newItems) in the @script, all as expected live and without any refresh. I need to be able to display a new or edited $task that's created with Livewire. Right now I need to refresh the page to see any edited or added $task that was created in the backend.

<div>
    @foreach($projects as $project)
        <div class="grid-stack gs-id-{{$project->id}}" id="{{$project->id}}" wire:ignore>
            @foreach($days as $day_index => $day)
                @foreach($day->tasks as $task)
                    <div class="grid-stack-item" gs-x="{{$day_index}}" gs-w="{{$task->duration}}" gs-y="1" gs-id="{{$task->id}}">
                        <div
                            wire:click="$dispatchTo('tasks.task-create', 'editTask', { task_id: {{$task->id}} })"
                            class="grid-stack-item-content"
                            >
                            <span>{{$task->title}}</span>
                        </div>
                    </div>
                @endforeach
            @endforeach
        </div>
    @endforeach

    <livewire:tasks.task-create :projects="$projects" :days="$days"/>
</div>

@assets
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.1.2/gridstack-all.js" defer></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.1.2/gridstack.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/10.1.2/gridstack-extra.min.css">
@endassets

@script
    <script>
        let grids = GridStack.initAll({
            column: 6,
            cellHeight: '60px',
            cellWidth: '100px',
            float: false,
            resizable: {
                handles: 'e'
            },
            margin: 2
        })

        grids.forEach(grid => {
            grid.on('change', function(event, items) {
                let newItems = []

                items.forEach ((el) => {
                    newItems.push({_id: el._id, x: el.x, y: el.y, w: el.w, task_id: el.id})
                });

                $wire.taskMoved(newItems)
            })
        })

        document.addEventListener('taskAdjusted', () => {
            console.log('HERE after taskAdjusted')
        })
    </script>
@endscript

I started to experiment with this using the following code: It works, every time I edit or add a task I receive a console log but I'm not sure what to put here from the gridstack api to have a $task updated.

document.addEventListener('taskAdjusted', () => {
   console.log('HERE after taskAdjusted')
})

I also tried to add wire:key="project-{{$project->id}}" in the $projects foreach and wire:key="task-{{$task->id}}" in the $tasks foreach but it didn't work so I found that wire:ignore on the div works best.

This is a follow-up question to a previous one that you guys were able to help me with, Thank you!

Answer 1

You can use Livewire events with JS like so:

document.addEventListener('livewire:initialized', () => {
    Livewire.on('event-name'), () => {
        // Handle changed here
    });
});

You can dispatch the events as well from livewire in JS or even with Alpine using Livewire.dispatch('event-name'); or $wire.dispatch('event-name');.

From there it looks like you may be able to use the added event.

grid.on('added', function(event: Event, items: GridStackNode[]) {
  items.forEach(function(item) {...});
});