Livewire更新触发x-if/x-for内x-data的Alpine.js非法调用错误

问题场景 #

在Livewire组件内使用Alpine.js的x-if指令包裹带有x-data的元素时，触发Livewire服务器往返（比如输入框绑定wire:model输入内容）后，Alpine抛出非法调用错误。简化代码如下：

<input type="text" wire:model="name" />

<template x-if="newItem">
    <div x-data="{
        open: false,
    }">
        <div x-text="open"></div>
    </div>
</template>

错误信息 #

SupportAlpine.js:294 Alpine Expression Error: Illegal invocation
Expression: "open"

使用x-for指令时也会出现类似问题。

临时规避方案 #

目前可用两种方式临时绕过错误：

• 用x-show替代x-if（但x-show仅隐藏元素而非移除DOM，适用场景有限）
• 给x-data元素添加x-init手动初始化状态，示例代码：

<input type="text" wire:model="name" />

<template x-if="newDossier">
    <div x-data="{
        id: 'dossierSearch',
        open: false,
        resultsFn: 'searchDossiers',
        searchText: ''
    }" x-init="this.open=false; this.searchText = ''">
        <div x-text="open"></div>
        <input x-model="searchText" />
    </div>
</template>

根本解决方法 #

问题根源是Livewire更新DOM时，未正确识别x-if内部的Alpine组件实例，导致旧实例与新DOM元素绑定冲突。只需给x-data所在的DOM元素添加唯一的wire:key，让Livewire每次更新时重新创建该元素并正确初始化Alpine组件。

修改后的正确代码：

<input type="text" wire:model="name" />

<template x-if="newItem">
    <div x-data="{ open: false }" wire:key="alpine-item-{{ $name }}">
        <div x-text="open"></div>
    </div>
</template>

原理说明 #

Livewire依赖wire:key跟踪DOM元素的唯一性，没有wire:key时，Livewire可能复用旧DOM节点，导致Alpine的旧组件实例与新渲染的DOM绑定，引发上下文错乱，最终抛出非法调用错误。添加唯一wire:key后，Livewire会在每次服务器往返后重新创建该元素，确保Alpine组件实例被正确初始化。

内容的提问来源于stack exchange，提问作者sergio0983