mstdmstd's avatar

Pagination implementation in laravel 5.5/vue.js app

Hello, I search for pagination implementation in laravel 5.5/vue.js app on mysql-based data. I googled and tried some examples : but they were did not workable or to complicated for me. If possible with live demo or tutorial ...

Thanks!

0 likes
4 replies
mstdmstd's avatar

Thank you! Very interesting! Has it some demo live ?

mstdmstd's avatar

I suppose that I have in file resources/assets/js/app.js file to add line :

...
import UserChatsEdit from './components/user_chats/UserChatsEdit.vue'; 
import SimplePagination from './components/SimplePagination.vue'; // ref to the pagination


const routes = [
    {
        path: '/',
        components: {
            tasksIndex: TasksIndex,                      /* router-view name in .vue file : imported reference to .vue file */
            user_task_typesIndex: UserTaskTypesIndex,
            user_chatsIndex: UserChatsIndex,
        }
    },
...

Is it so ?

But in console I see next :

       Asset    Size  Chunks                    Chunk Names
  /js/app.js  1.5 MB       0  [emitted]  [big]  /js/app
/css/app.css  150 kB       0  [emitted]         /js/app

WARNING in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-60f5633c","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0&bustCache!./resources/assets/js/components/user_task_types/UserTaskTypesIndex.vue
(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.
 @ ./resources/assets/js/components/user_task_types/UserTaskTypesIndex.vue 6:23-290
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

I have

  • Vue.js v2.5.8

Looks like you component is not compatible with my Vue.js( I have Laravel Framework 5.5.21 )... Is it easy to fix it ? Sorry, I am rather new in vue...

SyedAbuthahir's avatar

Its vue compatibility issue. I suggest you to build a simple pagination for your project by your self to learn vue. if you use some old packages you don't know how to handle everything. take a concept from above tutorial and build a new component from yourself don't copy and paste the code from blog post. understand the concept and implement in your own way.

Please or to participate in this conversation.