Cannot read property 'first' of undefined

[mossen]

The issue is related to :

<i v-if="css.icons.first != ''" :class="[css.icons.first]"></i>

by running following commands in VuetablePagination.vue:

beforeMount () { console.log(this.css); }, mounted () { console.log(this.css); }

I get :

Object {…} activeClass:"active" disabledClass:"disabled" linkClass:"btn btn-border" pageClass:"btn btn-border" wrapperClass:"pagination pull-right" __ob__:Observer get activeClass:function reactiveGetter() set activeClass:function reactiveSetter(newVal) get disabledClass:function reactiveGetter() set disabledClass:function reactiveSetter(newVal) get linkClass:function reactiveGetter() set linkClass:function reactiveSetter(newVal) get pageClass:function reactiveGetter() set pageClass:function reactiveSetter(newVal) get wrapperClass:function reactiveGetter() set wrapperClass:function reactiveSetter(newVal) __proto__:Object

[mossen]

Found the issue, in previous version I defined the data as:

data () {
            return {
                css: {
                    tableClass: 'table',
                    loadingClass: 'loading',
                    ascendingIcon: 'glyphicon glyphicon-chevron-up',
                    descendingIcon: 'glyphicon glyphicon-chevron-down',
                    sortHandleIcon: 'glyphicon glyphicon-menu-hamburger',
                },
                cssPagination: {
                    wrapperClass: 'pagination pull-right',
                    activeClass: 'active',
                    disabledClass: 'disabled',
                    pageClass: 'btn btn-border',
                    linkClass: 'btn btn-border',
                },
                icons: {
                    first: 'glyphicon glyphicon-step-backward',
                    prev: 'glyphicon glyphicon-triangle-left',
                    next: 'glyphicon glyphicon-triangle-right',
                    last: 'glyphicon glyphicon-step-forward',
                },
            }
        },

But now I need to define it like this:

data () {
            return {
                css: {
                    tableClass: 'table',
                    loadingClass: 'loading',
                    ascendingIcon: 'glyphicon glyphicon-chevron-up',
                    descendingIcon: 'glyphicon glyphicon-chevron-down',
                    sortHandleIcon: 'glyphicon glyphicon-menu-hamburger',
                },
                cssPagination: {
                    wrapperClass: 'pagination pull-right',
                    activeClass: 'active',
                    disabledClass: 'disabled',
                    pageClass: 'btn btn-border',
                    linkClass: 'btn btn-border',
                    icons: {
                        first: 'glyphicon glyphicon-step-backward',
                        prev: 'glyphicon glyphicon-triangle-left',
                        next: 'glyphicon glyphicon-triangle-right',
                        last: 'glyphicon glyphicon-step-forward',
                    }
                },
                icons: {
                    first: 'glyphicon glyphicon-step-backward',
                    prev: 'glyphicon glyphicon-triangle-left',
                    next: 'glyphicon glyphicon-triangle-right',
                    last: 'glyphicon glyphicon-step-forward',
                },
            }
        },

[ratiw]

@moh3n65 That's right. From v1.6 onward, the icon prop has been moved into the css prop object. Will update the tutorial to reflect the changes in v1.6 as soon as I can.