gpt4 book ai didi

javascript - Buefy 分页更改事件问题

转载 作者:行者123 更新时间:2023-12-04 08:19:16 26 4
gpt4 key购买 nike

我是 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/我不太确定我在这里做错了什么。

最佳答案

buetify 表没有 change事件,但是 page-change :

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

关于javascript - Buefy 分页更改事件问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65567926/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com