Vue中使用b-pagination组件如何在methods里获取当前页码

方式1：直接通过事件参数获取（最简单） #

BootstrapVue的b-pagination组件触发@input事件时，会自动将最新选中的页码作为参数传递给绑定的方法，直接给changePage添加形参接收即可：

methods: {
    changePage(page) {
         // page即为当前选中的页码
         console.log('当前页码：', page)
         // 后续直接用page执行分页查询等逻辑即可
    }
}

方式2：通过v-model绑定页码变量（推荐，方便全局复用状态） #

如果其他业务逻辑也需要用到当前页码，可以给组件加v-model绑定页码变量，随时随地都可以直接读取：

1. 模板部分添加v-model绑定：

<b-pagination
  v-model="currentPage"
  :total-rows="props.total"
  first-number
  last-number
  align="right"
  prev-class="prev-item"
  next-class="next-item"
  class="mt-1 mb-0"
  @input="changePage"
  >
</b-pagination>

2. 逻辑部分定义对应变量，直接读取即可：

Vue2 示例： #

export default {
  data() {
    return {
      currentPage: 1 // 默认值为第一页
    }
  },
  methods: {
    changePage() {
         // 直接读取绑定的变量即可
         console.log('当前页码：', this.currentPage)
    }
  }
}

Vue3 组合式API示例： #

import { ref } from 'vue'
// 定义绑定的页码变量
const currentPage = ref(1)

const changePage = () => {
  console.log('当前页码：', currentPage.value)
}

内容的提问来源于stack exchange，提问作者json