javascript - 如何定位分页的每个页面以在 Vuejs 中添加事件?
问题描述
< script >
export default {
data() {
return {
perPage: 3,
currentPage: 1,
items: [{
id: 1,
first_name: 'Fred',
last_name: 'Flintstone'
},
{
id: 2,
first_name: 'Wilma',
last_name: 'Flintstone'
},
{
id: 3,
first_name: 'Barney',
last_name: 'Rubble'
},
{
id: 4,
first_name: 'Betty',
last_name: 'Rubble'
},
{
id: 5,
first_name: 'Pebbles',
last_name: 'Flintstone'
},
{
id: 6,
first_name: 'Bamm Bamm',
last_name: 'Rubble'
},
{
id: 7,
first_name: 'The Great',
last_name: 'Gazzoo'
},
{
id: 8,
first_name: 'Rockhead',
last_name: 'Slate'
},
{
id: 9,
first_name: 'Pearl',
last_name: 'Slaghoople'
}
]
}
},
computed: {
rows() {
return this.items.length
}
}
} <
/script>
<template>
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
:items="items"
:per-page="perPage"
:current-page="currentPage"
></b-table>
</div>
</template>
我选择了 bootstrap-vue 分页,这是工作示例 https://bootstrap-vue.org/docs/components/pagination
如何定位分页的每个页面以在 Vuejs 中添加事件?我的意思是通常为每个页面调用一些事件/ Api 调用。
不确定如何定位特定页码并调用事件。
解决方案
如果我正确理解您的问题,您希望分页组件在每次更改页面时触发一个事件,对吗?
为此,您可能希望在每次更改页面时侦听分页组件返回的“page-click”事件。它返回页码和相应的事件。每当触发事件时,您都可以调用一个基本处理您想要的方法的方法。
如果这对您不起作用并且您需要更具体的用法,您可以为分页创建一个包装器组件以发出您想要供您使用的事件。尽管请记住,此解决方案将更难维护,并且最好在使用库时使用库的事件。
这是一个关于如何使用页面点击事件的非常简单的示例,就像 vue 中组件发出的任何其他事件一样:
<template>
<b-pagination @page-click="handleClick(event, pageNumber)"></b-pagination>
</template>
<script>
export default {
data() {
},
methods: {
handleClick(event, pageNumber) {
// your handling logic here
}
}
}
</script>
此外,您发送的文档在“防止页面被选中”部分中讨论了该事件。这个 git 讨论也可能有帮助:https ://github.com/bootstrap-vue/bootstrap-vue/issues/302
推荐阅读
- visual-studio - VS 2019 找不到 SDK
- solr - 带有 solr 和空格的startsWith
- qt - 在 Windows 上使用代码块成功执行 QT 应用程序构建
- r - 使用 R-INLA 运行混合效应模型时出现错误消息
- c# - xamarin 表单信号器核心客户端处理程序不在 ios 上执行,但在 android 上执行
- c# - 如何从存在许多重复行的相同对象的对象列表中获取最大值
- android - kotlin 中的 isEmpty 和 isBlank 有什么区别
- postgresql - Postgres 不使用索引对数据进行排序
- oracle-apex - 过程代码错误:ORA-06502:PL/SQL:数字或值错误:字符到数字的转换错误
- swift - Swift:将多个图像保存到核心数据