如何将Livewire属性值传递到Blade视图的<script>标签JS中？

问题根源 #

1. $apiKey未绑定到组件属性：组件内createNewDepositOpen方法中的$apiKey是局部变量，未赋值给组件的public属性，导致视图无法获取该值。
2. $op_id未同步到组件属性：创建数据库记录后，仅将$mydata['id']存入模型，但未更新组件的public属性$op_id，且@js是页面初始渲染时生成的静态值，后续组件属性更新不会同步到已渲染的JS。
3. Emit事件未携带动态参数：原有emit未传递所需数据，JS无法获取接口返回的最新动态值。

解决方案 #

步骤1：修正Livewire组件逻辑

更新createNewDepositOpen方法，绑定属性并在emit时携带参数：

public function createNewDepositOpen(Request $request)
{
    // 将API密钥赋值给组件public属性
    $this->apiKey = config('app.open_key');

    $response = Http::withHeaders([
        'Authorization' => 'Bearer ' . $this->apiKey,
        'accept' => 'application/json',
        'content-type' => 'application/json',
    ])->post('https://sandbox-icp-api.bankopen.co/api/payment_token',[
        'amount' => $this->op_amount,
        'mtx' => $this->op_mtx,
        'currency' => $this->op_currency,
        'udf' => $this->op_udf,
        'contact_number' => $this->op_contact_number,
        'email_id' => $this->op_email_id
    ]);

    $mydata = json_decode($response->getBody()->getContents(), true);

    OpenTransactions::create([
        'op_mtx' => $mydata['mtx'],
        'op_amount' => $mydata['amount'],
        'op_udf' => $mydata['udf'] ?? null,
        'op_contact_number' => Arr::get($mydata, 'customer.contact_number'),
        'op_email_id' => Arr::get($mydata, 'customer.email_id'),
        'op_currency' => $mydata['currency'],
        'op_id' => $mydata['id'],
        'op_attempts' => $mydata['attempts'],
        'op_sub_accounts_id' => $mydata['sub_accounts_id'],
        'op_entity' => $mydata['entity'],
        'op_status' => $mydata['status'],
        'op_customer_id' => Arr::get($mydata, 'customer.id')
    ]);

    // 同步组件的op_id属性
    $this->op_id = $mydata['id'];

    // Emit事件时直接传递所需参数
    $this->emit('token_create', [
        'token' => $this->op_id,
        'accesskey' => $this->apiKey
    ]);
}

步骤2：修改视图中的JavaScript逻辑

接收emit传递的参数，替代原有的@js方式：

<script type="text/javascript">
    window.onload = function () {
        Livewire.on("token_create", (data) => {
            Layer.checkout(
                {
                    token: data.token,
                    accesskey: data.accesskey,
                    theme: {
                        logo: "https://open-logo.png",
                        color: "#3d9080",
                        error_color: "#ff2b2b",
                    },
                },
                function (response) {
                    if (response.status == "captured") {
                        window.location.href = "success_redirect_url";
                    } else if (response.status == "failed") {
                        window.location.href = "failure_redirect_url";
                    } else if (response.status == "cancelled") {
                        window.location.href = "cancel_redirect_url";
                    }
                },
                function (err) {
                    // 处理集成错误
                }
            );
        });
    }
</script>

额外说明 #

• 动态场景下避免依赖@js：@js是服务器渲染时生成的静态值，后续组件属性更新无法同步到已渲染的JS。
• Livewire事件传参是标准交互方式：确保JS能获取到接口返回的最新动态数据，避免属性同步延迟问题。

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