lokyoung / vuejs-paginate

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

Container class doesn't initialized in production #96

Closed mrlee23 closed 5 years ago

mrlee23 commented 5 years ago

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="''"
  >
lokyoung commented 5 years ago

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
  }]
}
lokyoung commented 5 years ago

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