Question

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

例如

NaN

我遇到的问题是for (let i in sources) { // create a new tab with its own pagination }方法只发送新的页码，所以我不知道要更新哪个标签库。如果我尝试将商店名称发送到函数@page-changed="pageChanged"，它会覆盖新的页码，因此我仍然无法更新商店。

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

Answer 1

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

$event是从分页插件发出的页面＃值。

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

然后在function = pageChanged中，您将知道哪个标签（= 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>

使用Vue.js的多个分页实例

1 个答案: