我有一个简单的程序，可以显示 WordPress 帖子并根据类别点击加载。
我正在学习本教程（第二部分）https://joeyfarruggio.com/wordpress/sculpture-loader/
一路上我遇到了一些错误，但解决了大部分。
我还剩下一个错误，我正在解决
cdn.min.js:1 Alpine 表达式错误：总计未定义
表达式：“总计>（限制+偏移）”
div.text-center.mt-12_x_attributeCleanups：
在控制台中无法找出原因
这是我当前的代码，上面的错误是我遇到的唯一错误。
<?php /* Template Name: test */
?>
<html>
<head>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data("filterPosts", (adminURL) => ({
posts: null,
category: null,
showDefault: true,
showFiltered: false,
loadingNew: false, // <--- defaults to false
loadingMore: false, // <--- defaults to false
offset: 0,
filterPosts(id) {
this.loadingNew = true;
this.showDefault = false;
this.showFiltered = true;
this.category = id;
this.offset = 0; // <-- reset offset to zero
this.fetchPosts();
},
loadMore() {
this.loadingMore = true;
this.offset += 10;
this.showFiltered = true;
this.fetchPosts(true);
},
fetchPosts(append = false) {
var formData = new FormData();
formData.append("action", "filterPosts");
formData.append("offset", this.offset); // <-- Add new data to the form
// formData.append("limit", this.limit);
if (this.category) {
formData.append("category", this.category);
}
fetch(adminURL, {
method: "POST",
body: formData,
})
.then((res) => res.json())
.then((res) => {
if (append) {
// Appends posts to the end of existing posts data
this.posts = this.posts.concat(res.posts);
} else {
// Resets the posts data with new data
this.posts = res.posts;
}
this.loading = false;
// Reset both loading states
// this.loadingNew = false;
// this.loadingMore = false;
});
},
getTotal() {
var formData = new FormData();
formData.append("action", "filterPosts");
fetch(adminURL, {
method: "POST",
body: formData,
})
.then((res) => res.json())
.then((res) => {
this.total = res.total;
});
},
init() {
this.getTotal();
}
}));
})
</script>
</head>
<body>
<div x-data="filterPosts('<?php echo admin_url('admin-ajax.php'); ?>')">
<section <?php theme_section_attr_id() ?> <?php theme_section_attr_class('main-section js-posts') ?>>
<div class="container">
<div class="heading mx-0">
<?php $before_title = get_sub_field('before_title');
if ($before_title) : ?>
<strong class="sub-title"><?php echo $before_title ?></strong>
<?php endif ?>
<?php $title = get_sub_field('title');
if ($title) : ?>
<h2><?php echo $title ?></h2>
<?php endif ?>
</div>
<!--<div class="head js-posts-search-text">-->
<!-- <?php if ($search_value) : ?>-->
<!-- <h2 class="h5 fw-semibold"><?php printf(__('Showing results for “%s”', 'base'), $search_value) ?></h2>-->
<!-- <?php endif ?>-->
<!--</div>-->
<!--alipne js dynamic post start-->
<div class="has-filter row flex-md-row-reverse">
<div class="col-md-8 col-lg-9 js-posts-holder">
<!-- Posts Column -->
<div x-show.important="showDefault" class="row cards-area js-posts-items">
<!-- Default posts query -->
<?php get_template_part( 'template-parts/posts-filter/default-query' ); ?>
<!-- Load More Posts -->
<div class="text-center">
<button
@click="loadMore()"
x-show="total > (limit + offset)"
class="bg-white border border-solid border-slate-200 hover:bg-slate-100 px-4 py-2">
Load More</button>
</div>
</div>
<!-- Filtered posts -->
<div x-show.important="showFiltered" x-html="posts" class="row cards-area js-posts-items">
<!-- Default posts query -->
</div>
<!-- Skeleton Loader -->
<template x-if="loadingNew || loadingMore">
<div class="grid grid-cols-2 gap-6">
<template x-for="i in 4">
<div>
<div class="h-52 w-full bg-slate-200 rounded-lg"></div>
<div class="h-8 w-1/2 bg-slate-200 rounded-lg mt-4"></div>
</div>
</template>
</div>
</template>
</div>
<!-- Filtered posts -->
<div class="col-md-4 col-lg-3">
<aside class="sidebar">
<div class="widget widget-filter">
<button class="widget-title">Explore Topics</button>
<svg class="separator" viewBox="0 0 238 11" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<line opacity="0.3" y1="0.5" x2="101.942" y2="0.5" stroke="#3CD5AF"></line>
<line opacity="0.3" y1="10.5" x2="237.5" y2="10.5" stroke="#3CD5AF"></line>
</svg>
<?php
$categories = get_categories();
if ( ! empty( $categories ) ) :
?>
<ul class="filter-list">
<?php foreach ( $categories as $category ) :
// Skip "Uncategorized" category
if ($category->name == 'Uncategorized') continue; ?>
<li :class=" category == <?php echo $category->term_id; ?> ? '' : ''">
<a hreff="" @click="filterPosts(<?= $category->term_id; ?>)"><?= esc_html( $category->name ); ?></button>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
</aside>
<!-- Filtered end -->
</div>
</div>
</div>
<!--alipne js dynamic post end-->
</section>
</div>
</body>
</html>
在您的代码中，您使用了 total 和 limit 变量，但它们没有定义为 Alpine 属性。
要修复它，您需要进行如下更改：
Alpine.data("filterPosts", (adminURL) => ({
total: 0, // <<<< ADD THIS
limit: 0, // <<<< AND THIS
posts: null,
category: null,
.....
我还没有测试过我认为正确的代码逻辑...