Parcourir la source

:sparkles: passing pagination params

tags/0.9.0
J il y a 4 ans
Parent
révision
99e15088f0
2 fichiers modifiés avec 24 ajouts et 2 suppressions
  1. 13
    1
      vue-theme/src/pages/list.vue
  2. 11
    1
      vue-theme/src/utils/api.js

+ 13
- 1
vue-theme/src/pages/list.vue Voir le fichier

@@ -16,6 +16,7 @@
16 16
                 card(:content="post" :type="type" :wide="type == 'exhibition' && i > 1 || type == 'event' && i > 1 ")
17 17
 
18 18
         footer
19
+            button(@click="loadMore") load more {{ type }}s...
19 20
             p {{ `${type} count: ${Object.values(posts).length}` }}
20 21
             p {{ `show sidebar: ${sidebar}` }}
21 22
         
@@ -41,6 +42,12 @@ export default {
41 42
         sortBy: { type: String },
42 43
     },
43 44
     mixins: [postTypeGetters, scrollTop],
45
+    data() {
46
+        return {
47
+            page: 1,
48
+            perPage: 20
49
+        }
50
+    },
44 51
     computed: {
45 52
         type() {
46 53
             // Checks for type and fixes Episodes route edge case
@@ -62,10 +69,15 @@ export default {
62 69
         },
63 70
     },
64 71
     methods: {
72
+        loadMore() {
73
+            this.page++
74
+            this.getPosts()
75
+        },
65 76
         getPosts(offset) {
66 77
             // Limit
67 78
             let params = {
68
-                limit: 20
79
+                limit: this.perPage,
80
+                page: this.page
69 81
             }
70 82
             // Sorting
71 83
             let sort = this.sortBy

+ 11
- 1
vue-theme/src/utils/api.js Voir le fichier

@@ -7,9 +7,19 @@ const SETTINGS = {
7 7
     API_MEDIA_PATH: '/wp-json/wp/v2/media/',
8 8
 }
9 9
 
10
+const constructQuery = (params) => {
11
+    let query = ''
12
+    if(params.limit && params.page) {
13
+        query = `?limit=${params.limit}&p=${params.page}`
14
+    } else if(params.limit && !params.page) {
15
+        query = `?limit=${params.limit}`
16
+    }
17
+    return query
18
+}
19
+
10 20
 export default {
11 21
     getByType({ type, sort, params, cb }) {
12
-        let query = params && params.limit ? `?limit=${params.limit}`: ''
22
+        const query = constructQuery(params)
13 23
 
14 24
         if (sort && Object.values(sortTypes).includes(sort)) {
15 25
             return axios

Chargement…
Annuler
Enregistrer