使用Wire Elements Modal时AlpineJS出现data未定义错误求助

问题原因 #

wire-elements/modal 是动态将内容插入DOM的，当 Alpine 尝试解析 x-data="data{{$listing->id}}" 时，内部的 <script> 标签还未被浏览器执行，导致找不到对应的函数。而父页面是静态DOM，脚本会先执行，所以不会出现这个问题。

方案一：内联 Alpine 数据对象（推荐） #

直接把数据和方法写在 x-data 属性中，无需单独定义外部函数，这样 Modal 加载时能直接解析到内容：

<div class="p-2" x-data="{
    marketplaces: @json($marketplaces),
    marketplaceExists: @json($marketplaceExists),
    total: 0,
    selected: @entangle('selected'),
    syncBudget: function() {
        const data = this.marketplaces;
        let total = 0;
        this.selected.forEach(function(key) {
            const obj = data[key]
            total += parseInt(obj.price);
        });
        this.total = total;
    }
}" x-init="syncBudget()">
    {{-- 你的内容 --}}
</div>

注意：原代码中的 x-init="init()" 是错误的，因为返回的对象里没有 init 方法，这里改成调用 syncBudget() 来初始化计算。

方案二：提前加载脚本到全局作用域 #

将函数定义移到 Modal 组件外部，通过 @push 推到页面的脚本区域，确保 Alpine 初始化前函数已存在：

@push('scripts')
<script>
    const data{{$listing->id}} = () => {
        return {
            marketplaces: @json($marketplaces),
            marketplaceExists: @json($marketplaceExists),
            total: 0,
            selected: @entangle('selected'),
            syncBudget: function() {
                const data = this.marketplaces;
                let total = 0;
                this.selected.forEach(function(key) {
                    const obj = data[key]
                    total += parseInt(obj.price);
                });
                this.total = total;
            }
        }
    }
</script>
@endpush

<div class="p-2" x-data="data{{$listing->id}}" x-init="syncBudget()">
    {{-- 你的内容 --}}
</div>

需要确保你的主模板中包含 @stack('scripts') 来渲染这些推送的脚本。

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