如何在Alpine.js的@click事件中传入$total_posts_parent并赋值给total变量

1. 修改HTML链接代码 #

更新@click事件，传入分类ID和$total_posts_parent两个参数：

<a class="parent post_no" 
   data-value="<?= $total_posts_parent ?>" 
   @click="filterPosts(<?= $category->term_id; ?>, <?= $total_posts_parent; ?>)">
    <?= esc_html($category->name); ?> (<?= $total_posts_parent ?>)
</a>

2. 调整Alpine.js组件逻辑 #

在组件中添加（或修改）filterPosts方法，接收传入的参数并赋值给total变量：

Alpine.data("filterPosts", (adminURL) => ({
    posts: "",
    limit: 6,
    category: 0,
    post_type_js: post_id,
    showDefault: true,
    showFiltered: false,
    offset: 0,
    total: 0,
    // 处理点击事件的方法
    filterPosts(categoryId, totalPosts) {
        this.category = categoryId;
        this.total = totalPosts; // 将PHP传入的值赋值给组件的total变量
        // 可在此添加加载文章等后续逻辑
    }
}))

补充说明 #

• 若$total_posts_parent为字符串类型，需用单引号包裹参数，例如：'<?= $total_posts_parent; ?>'
• 点击链接时，Alpine.js会调用组件内的filterPosts方法，自动将PHP变量的值传递并赋值给组件的total属性。

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