search

lokyoung / vuejs-paginate

A Vue.js(v2.x+) component for creating pagination.
MIT License
779 stars 171 forks source link

Not working #97

Closed davidrichied closed 5 years ago

davidrichied commented 5 years ago

I'm not sure if it's just me, but vuejs-paginate doesn't seem to be working. The online demo isn't working, so I'm guessing it's not working for anyone with the latest version: https://jsfiddle.net/lokyoung/u3u3nzns/

davidrichied commented 5 years ago

I got it to work. I'm not extremely familiar with v-model, so maybe I was using it incorrectly. I replaced the v-model with :value and set :value to a computed property.

I was also trying to render this library on the server, but it was failing because the window and document objects were being called.

For anyone else running into issues, here's my code. If you are, also, trying to render this on the server, just copy the code from vuejs-paginate/src/components/Paginate.vue into your own components folder, and it should work fine.

Here's the paginate component.

<paginate :value="page" :page-count="20" :page-range="3" :margin-pages="2" :click-handler="changePage" :prev-text="'Prev'" :next-text="'Next'" :container-class="'pagination'" :page-class="'page-item'"> </paginate>

Here's the computed property that looks at a query parameter in the route.

computed: { page () { return this.$route.query['page'] ? Number(this.$route.query['page']) : 1; } },

Here's the onChange function that updates the page parameter in the route and causes the computed page property to change

`methods: { changePage(pageNum) { let query = Object.assign({}, this.$route.query); query['page'] = pageNum; this.$router.push({ path: 'directory', query: query})

  console.log(pageNum)
}

},`