Как вывести две пагинации на одной странице в nuxt.js?

1

npm install --save vue-pagination-2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<template>
  <div>
    <pagination :currentPage="currentPage" :perPage="perPage" :total="total" @paginate="paginate"></pagination>
  </div>
</template>

<script>
import Pagination from 'vue-pagination-2'

export default {
  components: {
    Pagination
  },
  props: {
    perPage: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  methods: {
    paginate(page) {
      this.currentPage = page
      this.$emit('paginate', page)
    }
  }
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<template>
  <div>
    <h1>Первая пагинация</h1>
    <MyPagination :perPage="perPage1" :total="total1" @paginate="fetchData1"></MyPagination>

    <!-- ваш контент -->

    <h1>Вторая пагинация</h1>
    <MyPagination :perPage="perPage2" :total="total2" @paginate="fetchData2"></MyPagination>

    <!-- ваш контент -->

  </div>
</template>

<script>
import MyPagination from '~/components/MyPagination.vue'

export default {
  components: {
    MyPagination
  },
  data() {
    return {
      perPage1: 10,
      total1: 100,
      perPage2: 20,
      total2: 200,
      // другие данные
    }
  },
  methods: {
    fetchData1(page) {
      // загрузить данные для первой пагинации
    },
    fetchData2(page) {
      // загрузить данные для второй пагинации
    },
    // другие методы
  }
}
</script>