Laravel Livewire 2 分页打破了 Alpine

Question

我很乐意发布部分或全部代码，但对于初学者来说，结果如下。 我有一个 Livewire 视图，其中包含分页的 Livewire 组件。 这些项目也可能被过滤。 但是，每当我执行以下任一操作时：

1. 从页面中删除项目（我有一个内置的方法可以删除该项目）
2. 更改正在过滤的内容 -（这是通过单击标签来完成的）
3. 更改页面

所有 Alpine JS 都在分页符上。 通过

x-cloak

隐藏的任何内容都会被隐藏，而使用

x-show

隐藏的任何内容都可见。 没有点击事件，没有商店，什么都没有。

我尝试过的：

1. 从嵌套项目中删除了所有复杂的子项目 - 基本上是破坏的 javascript 交互性的主要实现
2. 添加和删除了wire:key属性，即使这样做没有意义。还尝试使用随机字符串或当前时间使这些额外的动态。
3. 添加了隐藏输入并尝试将嵌套项数组绑定到模型，以便我可以使用生命周期方法 - 如果没有别的办法，只是在它们触发时进行调试。
4. 使用 alpine.js 或 livewire 执行任何操作时记录每个点。
5. 修改涉及的每个组件的不同属性以尝试触发不同的结果

什么也没有。 不管怎样，结果或多或少都是一样的。 Livewire 活动后 Alpine 就无法工作。 一件非常有趣的事情是，在每次请求之后，Alpine:init 函数都会在外部组件上触发，但仅此而已。 我尝试将其关闭以查看是否是问题所在，但没有成功。

任何可以阐明这种情况的信息都将不胜感激。

Answer 1

好的 - 我已经解决了。 解决方案非常简单，对于它为何有效，我只有抽象的猜测。

我的代码是这样的：

<div>
  @foreach($mediaItems as $item)
    <livewire:mediaItem :media="$item" key="mediaItem-{{$item}}"/>
  @endforeach
</div>

问题是媒体项在第一次分页或刷新等后会失去 javascript 交互性。无论出于何种原因，将其修改为以下内容立即修复它。

<div x-data>
  @foreach($mediaItems as $item)
    <livewire:mediaItem :media="$item" key="mediaItem-{{$item}}"/>
  @endforeach
</div>

就是这样。 我必须在直接包装元素上添加 x-data，以便保持交互性。即使包装元素已经从其父元素继承了

x-data

，我仍然需要在此处显式添加它。

这花费了我大量的时间，所以如果这个解决方案对其他人有帮助，我很高兴为您服务。