将 Livewire 数据从组件发送到 JS 库

Question

我有一个包含 js 库的 Livewire 组件，gridstack.js。

这是我到目前为止所拥有的，并且我的交互式网格加载正确。我可以调整页面上的 gridstack 项目，并通过

$wire.taskMoved(newItems)

中的

@script

将它们保存到数据库中，一切都按预期实时进行，无需任何刷新。我需要能够显示使用 livewire 创建的新的或编辑的

$task

。现在我需要刷新页面以查看在后端创建的任何已编辑或添加的

$task

。

<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

我开始使用以下代码进行实验。它有效，每次编辑或添加任务时，我都会收到控制台日志，但我不确定要从 gridstack api 放什么来更新 $task。

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

我还尝试在 $projects foreach 中添加

wire:key="project-{{$project->id}}"

和在 $tasks foreach 中添加

wire:key="task-{{$task->id}}"

但它不起作用，所以我发现 div 上的

wire:ignore

效果最好。

这是对上一个问题的后续问题，你们能够帮助我解决，谢谢！

Answer 1

您可以将 Livewire 事件与 JS 一起使用，如下所示：

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

您也可以使用 JS 中的 livewire 甚至 Alpine 使用

Livewire.dispatch('event-name');

或

$wire.dispatch('event-name');

来分派事件。

从那里看来您可以使用

added

事件。

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