如何在 Vue.js 中获取 API 并实现过滤、排序和分页

# Web 开发 # API # Vue

在本文中，我想分享如何从 API 获取数据，并在 Vue.js 应用程序中实现过滤、排序和分页等实用功能。这些功能在处理产品列表或内容库等项目时特别方便，因为用户需要一种简单的方法来浏览数据。我将逐步引导您完成整个过程，从获取数据到添加交互式控件，以便您可以在自己的项目中应用这些技术。让我们开始吧！

获取数据

**已安装**：

在 Vue.js 中，`onMounted` 是组件挂载到 DOM 后执行的生命周期钩子之一。简单来说，`onMounted` 中的代码在组件完全准备就绪并显示在屏幕上后运行。

在上面的示例中，`onMounted` 用于在组件加载时调用 `fetchProducts` 函数。此函数从外部 API 检索产品数据并将其存储在产品变量中。这可确保用户查看页面时数据可用。它对于初始化数据特别有用，例如获取产品列表、文章或页面所需的任何动态信息。

**v-for**：

`v-for` 是 Vue.js 中的一个指令，用于根据数组或对象中的数据动态渲染元素。在上面的示例中，`v-for` 用于根据从 API 获取的数据自动生成产品列表。

实现过滤、排序和分页

**v-模型：**

Vue 中的 `v-model` 指令支持表单输入与其关联的反应变量之间的双向数据绑定。这意味着输入字段中的任何更改都会立即更新链接变量，并且对变量的更改会以编程方式反映在输入字段中。例如，在此实现中，`v-model` 与 `searchTerm`、`category`、`sortBy`、`orderBy` 和 `limit` 输入一起使用，确保用户的选择或输入动态更新应用程序状态。

**计算：**

“计算”属性用于根据应用程序的状态执行反应式计算。它们允许高效更新，因为它们仅在依赖项发生变化时才重新评估。在此实现中，计算属性（如“orderByProducts”、“filteredProducts”、“searchedProducts”和“limitedProducts”）可实现产品列表的无缝过滤、排序和分页。每个计算属性都基于前一个计算属性的结果，确保所有操作都随着状态的变化而一致且动态地应用。

**过滤：**

const filteredProducts = computed(() => {
  if (category.value) {
    return orderByProducts.value.filter(
      (product) => product.category === category.value
    );
  }
  return orderByProducts.value;
});

过滤过程会检查是否选择了类别。如果是，则仅包含属于该类别的产品。

**排序：**

const orderByProducts = computed(() => {
  const sortedProducts = [...products.value];
  if (sortBy.value === 'title') {
    return orderBy.value === 'desc'
      ? sortedProducts.sort((a, b) => b.title.localeCompare(a.title))
      : sortedProducts.sort((a, b) => a.title.localeCompare(b.title));
  } else if (sortBy.value === 'price') {
    return orderBy.value === 'desc'
      ? sortedProducts.sort((a, b) => b.price - a.price)
      : sortedProducts.sort((a, b) => a.price - b.price);
  }
  return sortedProducts;
});

排序逻辑使用 JavaScript 的 sort 方法：

对于标题，它使用 localeCompare 来处理字符串比较。

对于价格，它进行数字排序。

**分页：**

const limitedProducts = computed(() => {
  const itemsPerPage = limit.value ? Number(limit.value) : 10;
  return searchedProducts.value.slice(
    (page.value - 1) * itemsPerPage,
    page.value * itemsPerPage
  );
});

切片方法根据当前页面和所选限制确定显示哪些产品。示例：如果“limit = 5”和“page = 2”，则显示索引为 5-9 的产品。

结论

感谢您花时间阅读本文。我希望这些解释能让您清楚地了解如何在 Vue.js 中有效地实现过滤、排序和分页。通过结合 v-model 的数据绑定功能和计算属性的响应式更新功能，这种方法可确保高效且动态的用户体验。

如果您有任何建议、问题或反馈，请随时分享！我随时欢迎讨论并乐于提供帮助。

GitHub：https://github.com/rfkyalf/vue-api-handling.git

我总是很高兴在网络开发项目上与他人联系和合作。您可以通过访问我的作品集网站来了解有关我的作品和过去项目的更多信息：https://www.rifkyalfarez.my.id。

CLIS.CC

如何在 Vue.js 中获取 API 并实现过滤、排序和分页

获取数据

实现过滤、排序和分页

结论