如何定位分页的每个页面以在 Vuejs 中添加事件？

Question

< 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 调用。

不确定如何定位特定页码并调用事件。

Answer 1

如果我正确理解了您的问题，您希望分页组件在每次页面更改时触发一个事件，对吗？

为此，您可能希望在每次更改页面时侦听分页组件返回的“页面点击”事件。它返回页码和相应的事件。每当触发事件时，您都可以调用一个基本处理您想要的方法。

如果这对您不起作用并且您需要更具体的用法，您可以为分页创建一个包装器组件以发出您想要供您使用的事件。尽管请记住，此解决方案将更难维护，并且最好在使用时使用库的事件。

这是一个非常简单的例子，说明如何使用页面点击事件，就像 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