Quellcode durchsuchen

:sparkles: passing pagination params

tags/0.9.0
J vor 4 Jahren
Ursprung
Commit
99e15088f0
2 geänderte Dateien mit 24 neuen und 2 gelöschten Zeilen
  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 Datei anzeigen

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

+ 11
- 1
vue-theme/src/utils/api.js Datei anzeigen

7
     API_MEDIA_PATH: '/wp-json/wp/v2/media/',
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
 export default {
20
 export default {
11
     getByType({ type, sort, params, cb }) {
21
     getByType({ type, sort, params, cb }) {
12
-        let query = params && params.limit ? `?limit=${params.limit}`: ''
22
+        const query = constructQuery(params)
13
 
23
 
14
         if (sort && Object.values(sortTypes).includes(sort)) {
24
         if (sort && Object.values(sortTypes).includes(sort)) {
15
             return axios
25
             return axios

Laden…
Abbrechen
Speichern