Container class doesn't initialized in production
mrlee23 opened this issue · 2 comments
mrlee23 commented
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 :
After click event :
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
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
}]
}