Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination functionality for Vue.js #186

Closed
gassio opened this issue Aug 29, 2023 · 3 comments · Fixed by #189
Closed

Pagination functionality for Vue.js #186

gassio opened this issue Aug 29, 2023 · 3 comments · Fixed by #189
Labels
📚 documentation Improvements or additions to documentation ❓ question Further information is requested
Milestone

Comments

@gassio
Copy link
Contributor

gassio commented Aug 29, 2023

Hi, 
Thanks for this amazing project.
I want to implement pagination functionality with Vue.js. Is there any way to pass an event function to the component's props?
The documentation you have does not provide any event handling options.
https://flowbite-vue.com/components/pagination

@cogor cogor added 📚 documentation Improvements or additions to documentation ❓ question Further information is requested labels Sep 7, 2023
@cogor
Copy link
Collaborator

cogor commented Sep 7, 2023

Hi, which event you need?
I'll add click:page, click:next, click:prev as soon as possible, if you need an another event – leave a comment

@cogor cogor added this to the 0.0.17 milestone Sep 7, 2023
@gassio
Copy link
Contributor Author

gassio commented Sep 7, 2023

Hi, I 've imported the component inside my project and I've added the event that I need. I didn't make a pull request for this yet. I send you see the changes that I made in the Pagination.vue file:

Code edited:

const emit = defineEmits(['update:modelValue', 'page-changed']);
const setPage = (index: number) => {
emit('update:modelValue', index)
emit('page-changed', index);
}
const decreasePage = () => {
emit('update:modelValue', props.modelValue - 1)
emit('page-changed', props.modelValue - 1);
}
const increasePage = () => {
emit('update:modelValue', props.modelValue + 1)
emit('page-changed', props.modelValue + 1);
}

Code added:

const goToFirstPage = () => {
emit('update:modelValue', 1);
emit('page-changed', 1);
}

const goToLastPage = () => {
const lastPage = computedTotalPages.value;
emit('update:modelValue', lastPage);
emit('page-changed', lastPage);
}

@cogor cogor linked a pull request Sep 8, 2023 that will close this issue
2 tasks
@cogor
Copy link
Collaborator

cogor commented Sep 21, 2023

Released in 0.0.17-next.10

@cogor cogor closed this as completed Sep 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📚 documentation Improvements or additions to documentation ❓ question Further information is requested
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants