vue.js - 在 Vue.js 中使用多个分页实例

Question

我想在循环中使用多个 Vue.js 的分页插件实例。

例如

for (let i in sources) {
    // create a new tab with its own pagination
}

我遇到的问题是该@page-changed="pageChanged"方法只发送新的页码，所以我不知道要更新哪个标签存储。如果我尝试将商店名称发送到函数pageChanged，它会覆盖新的页码，所以我仍然无法更新商店。

有没有办法确定哪个商店正在调用 pageChanged？

标签： vue.jspaginationvue-component

Answer 1

使用@page-changed="pageChanged($event, i)".

$event是从分页插件发出的 page# 值。

i是 的索引for (let i in sources)。

然后在function=pageChanged中，你会知道哪个tab（=sources[i]）收到了@page-changed事件。

伪代码将是：

或者您可以将选项卡对象传递给 pageChanged@page-changed="pageChanged($event, tab)"

<template>
  <div>
    <div v-for="(tab, tabIndex) in sources" :key="index">
      <v-tab :data="tab">
        <v-pagination @page-changed="pageChanged($event, tabIndex)"></v-pagination>
      </v-tab>
    </div>
  </div>
</template>

<script>
export default {
  data () {
  return {
    sources: ['tab1', 'tab2']
  },
  methods: {
    pageChanged: function (data, tabIndex) {
      // update something for this.sources[tabIndex]
    }
  }
}
}
</script>