Javascript 如何在Vue.js和WordPress中使用多个过滤器分页（或延迟加载无限滚动）

我想在WordPress的archive.php页面中使用分页进行多重筛选。我想显示从WP REST API中按类型/区域等过滤的资源。有人能帮我调整我的JS/HTML吗？我正在使用vue.js、WP REST API和WordPress

这是我的archive.php：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="archive_heading" class="resource">
    <h1 class="page_title">Resources</h1>
</div>


<div id="filtered_posts">
<div class="filters">
    <h3>Filter By Category</h3>
    <div class="categoryFilters">
        <div
            class="filter"
            :class="{ active: currentCategoryFilter === 'all' }"
            @click="setCategoryFilter('all')"
        >
            All
        </div>
        <div
            class="filter"
            :class="{ active: currentCategoryFilter === category.id }"
            @click="setCategoryFilter(category.id)"
            v-for="category in categories"
            :key="category.id"
        >
            {{ category.name }}
        </div>
    </div>
    <h3>Filter By Region</h3>
    <div class="regionFilters">
        <div
            class="filter"
            :class="{ active: currentRegionFilter === 'all' }"
            @click="setRegionFilter('all')"
        >
            All
        </div>
        <div
            class="filter"
            :class="{ active: currentRegionFilter === reg.id }"
            @click="setRegionFilter(reg.id)"
            v-for="reg in region"
            :key="reg.id"
        >
            {{ reg.name }}
        </div>
    </div>
        <h3>Filter By Usage</h3>
    <div class="usageFilters">
        <div
            class="filter"
            :class="{ active: currentUsageFilter === 'all' }"
            @click="setUsageFilter('all')"
        >
            All
        </div>
        <div
            class="filter"
            :class="{ active: currentUsageFilter === usage.id }"
            @click="setUsageFilter(usage.id)"
            v-for="usage in usages"
            :key="usage.id"
        >
            {{ usage.name }}
        </div>
    </div>
    <h3>Filter By Type</h3>
    <div class="typeFilters">
        <div
            class="filter"
            :class="{ active: currentTypeFilter === 'all' }"
            @click="setTypeFilter('all')"
        >
            All
        </div>
        <div
            class="filter"
            :class="{ active: currentTypeFilter === type.id }"
            @click="setTypeFilter(type.id)"
            v-for="type in types"
            :key="type.id"
        >
            {{ type.name }}
        </div>
    </div>
  <button @click="resetFilter">RESET</button>
</div>
<transition-group id="archive" class="categories" name="categories" >
<div v-for="resource in filteredResources" :key="resource.title.rendered">
        <div class="border" style="border-style: solid;">
            <a v-bind:href="resource.link"><h4 v-html="resource.title.rendered"></h4></a>
            
            <li v-if="resource._embedded['wp:term'][0][0]" v-for="(item, index) in resource._embedded['wp:term'][0]">
                 {{ item.name }}</li>

            
            <li v-if="resource._embedded['wp:term'][1][0]" v-for="(item, index) in resource._embedded['wp:term'][1]">
                 {{ item.name }}</li>
            <li v-if="resource._embedded['wp:term'][2][0]"v-for="(item, index) in resource._embedded['wp:term'][2]">
                {{ item.name }}</li>
            <li v-if="resource._embedded['wp:term'][3][0]" v-for="(item, index) in resource._embedded['wp:term'][3]" >
                 {{ item.name }}</li>

        </div>
    </div>
</transition-group>
</div>

感谢您的帮助，并提前向您表示感谢

new Vue({
    el: '#filtered_posts',
    data() {
      return {
        currentCategoryFilter: 'all',
        currentRegionFilter: 'all',
        currentUsageFilter: 'all',
        currentTypeFilter: 'all',
        filteredResources: [],
        categories: [],
        usages: [],
        types: [],
        region: [],
        allResources: [],
        taxonomies: [],
      }
    },
    mounted() {
        fetch("https://oc-hub.org/community/wp-json/wp/v2/categories")
            .then(response => response.json())
            .then((data) => {
                this.categories = data;
            })
        fetch("https://oc-hub.org/community/wp-json/wp/v2/region")
            .then(response => response.json())
            .then((data) => {
                this.region = data;
            })
        fetch("https://oc-hub.org/community/wp-json/wp/v2/resource_usage")
            .then(response => response.json())
            .then((data) => {
                this.usages = data;
            })
        fetch("https://oc-hub.org/community/wp-json/wp/v2/resource_type")
            .then(response => response.json())
            .then((data) => {
                this.types = data;
            })
        fetch("https://oc-hub.org/community/wp-json/wp/v2/resource?per_page=20&_embed=wp:term")
            .then(response => response.json())
            .then((data => {
                this.allResources = data;
                this.filteredResources = data;
            }))
    },
    methods: {
        setCategoryFilter(filter) {
            this.currentCategoryFilter = filter;
        },
        setRegionFilter(filter) {
            this.currentRegionFilter = filter;
        },
        setUsageFilter(filter) {
            this.currentUsageFilter = filter;
        },
        setTypeFilter(filter) {
            this.currentTypeFilter = filter;
        },
        resetFilter() {
            this.currentCategoryFilter = 'all';
            this.currentRegionFilter = 'all';
            this.currentUsageFilter = 'all';
            this.currentTypeFilter = 'all';
            this.filterResources = this.allResources;
        }
    },
    watch: {
        currentCategoryFilter: function() {
            const newResources = this.allResources.filter(resource => this.currentRegionFilter === 'all' || resource.region[0] === this.currentRegionFilter );
            const typeFilteredResources = newResources.filter(resource => this.currentTypeFilter === 'all' || resource.resource_type[0] === this.currentTypeFilter);
            const preFilteredResources = typeFilteredResources.filter(resource => this.currentUsageFilter === 'all' || resource.resource_usage[0] === this.currentUsageFilter);
            return this.filteredResources = preFilteredResources.filter(resource => this.currentCategoryFilter === 'all' || resource.categories[0] === this.currentCategoryFilter);
        },
        currentRegionFilter: function() {
            const newResources = this.allResources.filter(resource => this.currentRegionFilter === 'all' || resource.region[0] === this.currentRegionFilter );
            const typeFilteredResources = newResources.filter(resource => this.currentTypeFilter === 'all' || resource.resource_type[0] === this.currentTypeFilter);
            const preFilteredResources = typeFilteredResources.filter(resource => this.currentUsageFilter === 'all' || resource.resource_usage[0] === this.currentUsageFilter);
            return this.filteredResources = preFilteredResources.filter(resource => this.currentCategoryFilter === 'all' || resource.categories[0] === this.currentCategoryFilter);
        },
         currentUsageFilter: function() {
            const newResources = this.allResources.filter(resource => this.currentRegionFilter === 'all' || resource.region[0] === this.currentRegionFilter );
            const typeFilteredResources = newResources.filter(resource => this.currentTypeFilter === 'all' || resource.resource_type[0] === this.currentTypeFilter);
            const preFilteredResources = typeFilteredResources.filter(resource => this.currentUsageFilter === 'all' || resource.resource_usage[0] === this.currentUsageFilter);
            return this.filteredResources = preFilteredResources.filter(resource => this.currentCategoryFilter === 'all' || resource.categories[0] === this.currentCategoryFilter);
        },
        currentTypeFilter: function() {
            const newResources = this.allResources.filter(resource => this.currentRegionFilter === 'all' || resource.region[0] === this.currentRegionFilter );
            const typeFilteredResources = newResources.filter(resource => this.currentTypeFilter === 'all' || resource.resource_type[0] === this.currentTypeFilter);
            const preFilteredResources = typeFilteredResources.filter(resource => this.currentUsageFilter === 'all' || resource.resource_usage[0] === this.currentUsageFilter);
            return this.filteredResources = preFilteredResources.filter(resource => this.currentCategoryFilter === 'all' || resource.categories[0] === this.currentCategoryFilter);
        },
    }
})