如何将PHP从MySQL获取的数组传递给Alpine.js的x-init函数？

你的代码存在两个关键问题，导致无法将PHP数据传递给Alpine.js：

1. PHP未输出JSON数据 #

在index.php的x-init中，json_encode($results)仅生成JSON字符串，但未通过echo输出到HTML中，导致fetchPost函数接收的参数为空。

2. Alpine.js组件中this指向错误 #

app.js里的fetchPost使用了箭头函数，箭头函数的this不会绑定到Alpine组件实例，而是指向全局window对象，因此你赋值的this.posts并不是组件内部的posts数组。

修正后的完整代码 #

index.php

<?php
$results = getPosts();
?>

<div x-data="posting()" x-init="fetchPost(<?php echo json_encode($results, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>)">
    <template x-for="post in posts" :key="post.id">
        <h2 x-text="post.title"></h2>
        <p x-text="post.content"></p>
        <p x-text="post.username"></p>
    </template>
</div>

• 增加echo输出JSON字符串
• 添加JSON_HEX_*参数转义特殊字符，避免XSS风险

app.js

document.addEventListener("alpine:init", () => {
    Alpine.data("posting", () => ({
        // 改用普通函数，确保this指向Alpine组件实例
        fetchPost: function(data) {
            this.posts = data;
            console.log(this.posts);
        },
        posts: [],
    }));
});

更简洁的写法（可选） #

如果不需要额外逻辑处理，可直接在初始化组件时传递数据，省去fetchPost函数：

index.php

<?php
$results = getPosts();
?>

<div x-data="posting(<?php echo json_encode($results, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>)">
    <template x-for="post in posts" :key="post.id">
        <h2 x-text="post.title"></h2>
        <p x-text="post.content"></p>
        <p x-text="post.username"></p>
    </template>
</div>

app.js

document.addEventListener("alpine:init", () => {
    Alpine.data("posting", (initialPosts) => ({
        posts: initialPosts || [],
    }));
});

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