Buefy分页更改事件问题答案

【问题标题】：Buefy pagination change event issueBuefy分页更改事件问题
【发布时间】：2021-01-04 18:30:06
【问题描述】：

我是 vue 的新手，目前正在尝试使用 buefy 库来使用分页来一次获取有限数量的行以提高页面加载性能。这是我的大部分代码。

<template>
  <div id="app">
    <b-table
      :data="filter_list"
      :paginated="isPaginated"
      :row-key="(f) => f.id"
      :per-page="25"
      :current-page="currentPage"
      :pagination-simple="isPaginationSimple"
      :pagination-position="paginationPosition"
      :default-sort-direction="defaultSortDirection"
      :sort-icon="sortIcon"
      :sort-icon-size="sortIconSize"
      default-sort="version"
      aria-next-label="Next page"
      aria-previous-label="Previous page"
      aria-page-label="Page"
      aria-current-label="Current page"
      @change="getRows"
    />
  </div>
</template>

<script>
import data from "./data";

export default {
  name: "App",
  data() {
    return {
      filter_list: data,
      isPaginated: true,
      isPaginationSimple: true,
      paginationPosition: "bottom",
      defaultSortDirection: "desc",
      sortIcon: "arrows-v",
      sortIconSize: "is-small",
      currentPage: 1,
      perPage: 10,
      totalPages: 0,
    };
  },
  components: {},
  computed: {},
  methods: {
    getRows(currentPage) {
      console.log(currentPage.currentPage);
      // call rest api here with the current page number and push the response
      // into filter_list

    },
  },
  mounted() {},
};
</script>

这里是实时代码沙箱https://codesandbox.io/s/suspicious-lichterman-6n4ep?file=/src/App.vue:0-1254。

我想触发getRows 方法，然后在其中触发一个rest API 请求，以获取特定页面的所有行。被请求的API内置了页码和总页数的逻辑。它以页码为参数，返回25行（也是参数）的数据。

当我单击下一页/上一页箭头时，我没有看到 getRows 方法被触发，主要需要帮助。我主要提到https://buefy.org/documentation/pagination/，我不太确定我在这里做错了什么。

【问题讨论】：

标签： javascript vue.js buefy

【解决方案1】：

buetify 表没有change 事件，但是page-change：

...
@page-change="getRows"
...
getRows(currentPage) {
  console.log(currentPage);
},

【讨论】：