Add a changeable selection for page size to a pagination

[Agnes12180]

Hi,
I want to add a selection to a pagination in order to change count for per page. I just packaged my own component by using BPagination, but it dosn't work, the content for each page doesn't be updated when change to a new page. If I put the code after the BTable, it works. I wonder if it's a problem to the table ids. I have no idea how to link table id to the pagination ariaControls.
Here is my component.

Here is my table.

I use [table] as an id to a BTable and as a prop ariaControls and put it into my component, it's invalid， but if I do below change, it works.

I don't know if there is already such function in BPagination, so I code it by myself. This function looks like below picture.

Could you please take a look? Thanks in advance.

[Hiws]

I don't see you changing perPage anywhere, which is what controls how many items are shown per page.

[Agnes12180]

I don't see you changing perPage anywhere, which is what controls how many items are shown per page.

sorry, I didn't put the whole code. Selected is for changing per page.

[Hiws]

and what are you doing with that emitted data in the parent?

[Agnes12180]

and what are you doing with that emitted data in the parent?

I put perPage and currentPage to the b-table which is used in the parent.

[Hiws]

Yes. But your <b-page> component has a @pageChange event.
What are you doing in that method?

It might also be a lot easier if you created a reproduction of what you currently have in a codesandbox/codepen.

[Agnes12180]

Yes. But your <b-page> component has a @pageChange event.
What are you doing in that method?

It might also be a lot easier if you created a reproduction of what you currently have in a codesandbox/codepen.

Hiya,
I put my demo in a codesandbox.
https://codesandbox.io/embed/dreamy-elgamal-lmb8y?fontsize=14&hidenavigation=1&theme=dark
I used my page component for the first table and used original bpagination for the second one.

[Hiws]

Looks like i misunderstood what your issue was.

You can fix your issue by adding @change="pageChange" to <b-pagination> inside your component.

However, i would recommend you look into making two-way bindings for your props using the sync modifier.
As it should make your logic quite a bit easier to manage.
https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

[Agnes12180]

https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

It works!!! THANK YOU so much!