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

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

比如说

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

我遇到的问题是

@page changed=“pageChanged”

方法只发送新的页码，所以我不知道要更新哪个选项卡存储。如果我尝试将门店名称发送到函数

pageChanged

，它会覆盖新的页码，因此我仍然无法更新门店

有没有办法确定调用pageChanged的存储？

使用

@page changed=“pageChanged（$event，i）”

$event

是分页插件发出的页面值

i

是

中的索引，用于（让我输入源）

然后在function=pageChanged中，您将知道哪个选项卡（=sources[i]）接收了@page changed事件

伪代码将是：

或者您可以将选项卡对象传递给pageChanged，如

@page changed=“pageChanged（$event，tab）”

导出默认值{
数据（）{
返回{
资料来源：['tab1'，'tab2']
},
方法：{
pageChanged:函数（数据、选项卡索引）{
//为此更新某些内容。源[tabIndex]
}
}
}
}

<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>