Vuetify: The problem with pagination in the data table

[cawa-93]

Steps to reproduce

Create a component within which there will be a data table
Add the pagination option

Versions

What is expected ?

pops pagination must auto-fill some default options, like as rowsPerPage. This is the case if the data table is native

What is actually happening ?

User data completely replaces the standard value. Because of what the table does not display information. This is the case if the data table is in another component

As a consequence of the field, pageStart and pageStop are NaN

This leads to the fact that all elements are filtered out in filteredItems

Reproduction Link

https://codepen.io/cawa-93/pen/qmzpZW?editors=1010

[nekosaur]

This is not a bug with the data table component. It's simply a fact of life when using the .sync modifier. You must emit an update event in your component when the data table changes the pagination, since in your component, pagination is simply a prop which you can't modify directly.

See here for a solution https://codepen.io/anon/pen/GmbwZa

[cawa-93]

@nekosaur I encountered this problem when developing on a nuxt. There I used a table in the same component as I declared the data. But for the Reproduction, I had to create a separate component.

[nekosaur]

If you can provide a simple git repo that reproduces the error using nuxt then I will try to take another look

[cawa-93]

@nekosaur
https://github.com/cawa-93/nuxt-data-table/blob/master/resources/pages/index.vue
After clone run npm run dev and open http://localhost:3000. Dependencies are already in the repository, they do not need to be installed

[nekosaur]

Am I missing something obvious here? Your example file is not using the .sync modifier. If I add it then the pagination object gets set correctly. Although I do get another error related to the items slot, which I'm guessing is related to nuxt.

[cawa-93]

Yes. I made a typo. However, it's strange that you are all right. In my case, even the presence of a modifier does not solve the problem. Added in the example the second table WITHOUT the parameter of pagination, in which there is no problem.

[cawa-93]

@nekosaur So what do you say?

[nekosaur]

So what error are you getting when you do add the .sync modifier? Like I said when I inspect the pagination object when using the modifier it looks okay, but I get another error regarding the items slot. However that is not related to the pagination.

[cawa-93]

@nekosaur
The problem remained, even with a .sync modifier. I do not understand what's the matter, but if I specify the pagination option, the data in the table is not displayed.

<v-data-table
  :headers="headers"
  :items="page.posts"
  :pagination.sync="pagination"
>

Perhaps this is the same problem that you are writing about. I dont know ...

[nekosaur]

I am in agreement that the data is not displayed, but it is not because of the pagination prop or the sync modifier. If you look at the console output you will see an error about this.$scopedSlots.items not being defined or something similar. If anything it could be related to this issue https://github.com/vuejs/vue/issues/5807

[cawa-93]

No. There are no errors or warnings in the console

[nekosaur]

The .sync modifier was introduced in vue 2.3. You are running 2.2.6

[mheppner]

They've already closed the issue linked above, but I can confirm I'm getting the same problem of this.$scopedSlots being undefined in 2.3.3 and 2.3.4, but not 2.3.2.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord