lokyoung/vuejs-paginate

Container class doesn't initialized in production

mrlee23 opened this issue · 2 comments

Hello, Thank you for the providing a convenient pagination package.

When I use a vuejs-paginate with Nuxt.js and Materilize.css in my project, I found a rendering bug.

I set the vuejs-paginate props like this :

<vuejs-paginate
  v-model="currentPage"
  :page-count="getPageCount()"
  :page-range="pageRange"
  :margin-pages="1"
  :container-class="'pagination'"
  :page-class="'waves-effect waves-light'"
  :active-class="'active teal'"
  :page-link-class="'page-link'"
  :prev-class="'waves-effect waves-light'"
  :next-class="'waves-effect waves-light'"
  :prev-text="prevText"
  :next-text="nextText"
  :click-handler="click"
  >

In development status, It works fine.
But, In production status, vuejs-paginate doesn't bind the container-class as a class name.
However, after click event, added a container class name and works fine.

Initialized page :

2018-10-29 7 37 55

2018-10-29 7 37 59

After click event :

2018-10-29 7 38 05

2018-10-29 7 38 10

So, I bind a new class prop with empty string "''", It works fine. Is there any other way?

<vuejs-paginate
  v-model="currentPage"
  :page-count="getPageCount()"
  :page-range="pageRange"
  :margin-pages="1"
  :container-class="'pagination'"
  :page-class="'waves-effect waves-light'"
  :active-class="'active teal'"
  :page-link-class="'page-link'"
  :prev-class="'waves-effect waves-light'"
  :next-class="'waves-effect waves-light'"
  :prev-text="prevText"
  :next-text="nextText"
  :click-handler="click"
  :class="''"
  >

Hi @mrlee23 , you need to setup this component by configuring nuxt.

// plugins/vuejs-pagiante
import Vue from 'vue'
import Paginate from 'vuejs-paginate/src/components/Paginate.vue';
Vue.component('Paginate', Paginate);

// nuxt.config.js
module.exports = {
  plugins: [{
    src: '~/plugins/vuejs-paginate.js',
    ssr: true
  }]
}

@mrlee23 BTW, so sorry for replying so late since I'm too busy. I will try to reply quickly next time.