如何在JavaScript代码中获取Livewire组件的property属性值

你写的脚本会在页面解析到对应位置时立即执行，此时Livewire的前端实例还未完成初始化，$wire对象还未挂载，因此无法正常调用获取属性。以下是可直接落地的解决方案：

• 方案1：监听Livewire初始化事件后执行逻辑
  适合需要后续调用$wire方法做动态交互的场景：

<x-order>
    <script>
        document.addEventListener('livewire:initialized', () => {
            // 两种写法效果一致
            console.log($wire.get('order'));
            // 简化写法
            console.log($wire.order);
        })
    </script>
</x-order>

• 方案2：借助Alpine.js的x-init钩子（Livewire默认集成Alpine）
  写法更简洁，适合组件内的前端逻辑绑定：

<x-order x-data x-init="console.log($wire.order)">
    <!-- 组件其他内容 -->
</x-order>

• 方案3：服务端直接注入属性值到JS
  仅需要获取初始值、不需要后续实时同步属性的场景下可以使用，性能最优：

<x-order>
    <script>
        const order = @json($order);
        console.log(order);
    </script>
</x-order>

• 需确保order是Livewire组件声明的public公共属性，非public属性不会暴露到前端$wire对象，无法通过上述方式获取

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