Vue.js中如何通过API查询实现复选框数据过滤？

核心实现思路 #

• API请求参数化：根据选中的过滤选项，动态拼接查询参数到请求URL。第三方CMS通常支持?Genres=分类名的查询规则，默认选中"All"时不传该参数，拉取全量数据。
• 替换本地过滤为远程请求：点击过滤选项时，不再操作本地缓存数据，直接触发带参数的API请求，获取符合条件的结果。
• 同步状态与数据更新：请求完成后更新展示数据、总数，并处理空数据的提示状态。
• 优化体验：添加加载状态，避免用户重复触发请求。

修改后的模板（仅调整关键部分） #

<template>
  <!-- 其余结构保持不变 -->
  <div
    id="jobs"
    class="job-item"
    v-for="(item, index) in showJobs"  <!-- 修正循环变量为showJobs -->
    :key="index"
    :per-page="perPage"
    :current-page="currentPage"
  >
    <!-- 职位内容结构不变 -->
  </div>
  <!-- 可选：添加加载提示 -->
  <div v-if="isLoading" class="loading">加载中...</div>
  <h3 class="not-found" v-show="showNoData">Not Found</h3>
</template>

修改后的JavaScript逻辑 #

<script>
import "../assets/style.css";
import "../assets/job.css";
import job from "../locales/lang";
import request from "@/utils/request";
import moment from "moment";
export default {
  name: "jobs",
  components: {},
  data() {
    return {
      totalJobs: null,
      tickTime: "",
      currentPage: 1,
      showPag: true,
      showNoData: false,
      perPage: 4,
      search: "",
      page: "",
      noData: [],
      checks: [
        "All",
        "Developer",
        "Tester",
        "Designer",
        "Support",
        "Marketing",
        "Other",
      ],
      showJobs: [],
      selected: "All",
      isLoading: false, // 新增加载状态变量
    };
  },
  async mounted() {
    // 初始加载全量数据
    await this.fetchJobs();  
    // 回车搜索事件绑定
    window.addEventListener("keyup", (event) => {
      if (event.keyCode === 13) {
        this.searchJob();
      }
    });
  },
  methods: {
    // 重构为带参数的统一API请求方法
    async fetchJobs(filterGenre = null) {
      this.isLoading = true;
      let url = `jobs?_locale=${this.$route.params.locale}`;
      
      // 拼接分类过滤参数
      if (filterGenre && filterGenre !== "All") {
        url += `&Genres=${filterGenre}`;
      }
      // 可选：拼接搜索关键词参数（需确认CMS支持的查询规则，比如Name_like是模糊查询示例）
      if (this.search) {
        url += `&Name_like=${encodeURIComponent(this.search)}`;
      }

      try {
        const response = await request.get(url);
        this.showJobs = response.data;
        this.totalJobs = response.data.length;
        this.showNoData = response.data.length === 0;
        this.showPag = response.data.length > 0;
      } catch (e) {
        console.error("职位数据请求失败:", e);
        this.showJobs = [];
        this.showNoData = true;
      } finally {
        this.isLoading = false;
      }
    },

    // 过滤选项点击事件
    async selectFilter(item) {
      this.selected = item;
      // 调用带分类参数的请求
      await this.fetchJobs(item);
    },

    // 搜索方法（整合分类过滤）
    async searchJob() {
      // 基于当前选中分类+搜索词请求数据
      await this.fetchJobs(this.selected);
    },

    // 时间格式化方法（保留原有逻辑）
    momentTime(time) {
      return moment(time).format("YYYY-MM-DD");
    }
  },
};
</script>

关键修改说明 #

1. 新增fetchJobs方法：统一处理所有职位数据请求，支持动态拼接分类、搜索等查询参数，同时处理加载状态和错误情况。
2. 替换本地过滤逻辑：selectFilter不再操作本地数组，直接调用fetchJobs发起远程请求。
3. 整合搜索功能：将搜索关键词也作为参数拼接到API请求中，实现分类+关键词的组合过滤（需根据CMS实际支持的查询规则调整参数名）。
4. 修正模板变量：将循环渲染的jobs改为showJobs，与数据变量对应。

内容的提问来源于stack exchange，提问作者Nguyễn Thế Hưng