Livewire 并从wire:id获取元素id

Question

我使用 livewire 全页组件来显示任务列表以及所有关联的 CRUD 内容，并使用 Dragula 来允许拖放。

我最初通过 TaskListComponent 运行所有这些，并且在使某些功能正常工作时遇到困难，所以我现在有一个仅处理任务本身的子组件。因此，有一个 TaskListComponent 就是页面，然后我有一个在 foreach 循环中添加到页面的 TaskComponent。我的想法是，所有任务列表类型功能都将发生在主组件中，并且与特定任务（显示、更新、删除等）相关的任何内容都将在 TaskComponent 中。告诉我你是否会这样构建它？

我现在的问题是，基于该结构，我有一些在页面上运行的 JavaScript 来侦听 Dragula 放置事件并处理任务的重新排序/更改状态，它依赖于元素 ID，但由于我将每个任务设置为 livewire组件现在元素 id 被替换为wire:id，它是一些哈希值。我不知道如何在 javascript 中访问它并获取原始的 html 元素 ID。

这是我的刀片文件中的内容：

@foreach ($tasks as $task)
    @if ($task->task_status_id === $status->id)
        <livewire:tasks.task-component wire:key="{{ $task->id }}" :task="$task" data-task-id="{{ $task->id }}" />
    @endif
@endforeach

这是使用 Dragula 的 js 代码：

drag.on('drop', function(el, target, source, sibling) {
                console.log(el);
});

上面的console.log输出：

<div wire:id="1pPdyV6eX8kgtePfXBzk" ...></div>

抱歉，我知道这是一个菜鸟问题，但从文档中并不清楚如何达到我想要的目标。我尝试过使用 Livewire.find() 但它返回未定义。我可以在控制台中使用 Livewire 命令，所以我知道它可用。

也可能相关的是，我调用的任何类型的$wire命令都表示 $wire 未定义。我在 app.js 文件中找到了这个文件，该文件是在 livewire 脚本之后加载的：

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

我可以在控制台中执行 Alpine，它知道那是什么。

任何帮助将不胜感激。

Answer 1

您应该使用属性将 app.js 文件加载到文档的头部defer。

然后，您可以使用$wire或this.$wire访问 Livewire 组件。但这仅当您的 Alpine 组件位于Livewire 组件内部时才有效。