Table: Page change event in table always sending value 1

[Nemesis19]

trafficstars

oruga: 0.8.1 (I cannot upgrade to 0.8.2 due to many bugs already issued) vue: 3.3

the page-change event in table always sends value 1 even if I'm clicking on 2-3-4 page or clicking on right-left arrows.

<o-table
			striped
			backend-pagination
			:paginated="paginated"
			:data="data"
			:total="page.total"
			:current-page="page.current"
			:per-page="page.perPage"
			:order="'left'"
			@page-change="onPageChange">

Please fix it asap. Thanks! 🙏

[mlmoravek]

@Nemesis19 I appreciate you opening bug issues :) The refactoring from the options api to the script setup composition api was quite a big think. I tried and tested as much as I could, but I had to touch almost every line of code in the project. I hope you excuse me for the unfounded bugs and I welcome you to open an issue if you find any!

And for this bug, it only happens when the current-page prop isn't used as a v-model. Using v-model:current-page would fix this for now. However, @jtommy has already made the fix for this for the next release :)

[Nemesis19]

Thanks for your kind reply. Unfortunately the many bugs I opened are making me think to downgrade to 0.7.0 cause they are making unusable my projects where I'm actively using Oruga.

Thanks for your effort, I'm converting a private project from vue2 to vue3 and I know the burden this thing carries on.

[mlmoravek]

You are welcome to open pull requests for bugs you find. This helps us a lot and makes it more likely that the bug will be fixed as soon as possible. However, by opening an issue, I will try to help you with a workaround as much as possible.

[Nemesis19]

I upgraded to latest version 0.8.3 but bug still persists and workaround is not working since @page-change event is always sending 1.

@mlmoravek please reopen the issue

<o-table
			custom-row-key="id"
			striped
			backend-pagination
			:paginated="paginated"
			:data="data"
			:total="page.total"
			v-model:current-page="page.current"
			:per-page="page.perPage"
			:order="'left'"
			@page-change="onPageChange">

my current code for workaround that's not working...

[mlmoravek]

@Nemesis19 Could you provide a fully reproducible example on https://codesandbox.io/ or any other sharing platform?

[Nemesis19]

I'm using the same example as the doc

https://www.pastery.net/kxwbqk/

please be aware that the console log inside the onPageChange function reports a different page than the one clicked visually in the template.

• template click 2, p is 1
• template click 100, p is 5

basically the sent "p" value is the previous value of "p".

if you click on template 3 and then 2, p is gonna be equal to 3.

It's important to advise in the DOC why the :current-page prop or its v-model should not be used with Async Data table example, as I actually don't understand why it's missing.

<o-table
			custom-row-key="id"
			striped
			backend-pagination
			:paginated="paginated"
			:data="data"
			:total="page.total"
			:current-page="page.current"
			:per-page="page.perPage"
			:order="'left'"
			@page-change="onPageChange">

this is my table

async function onPageChange(value: number, search: boolean = true) {
		page.value.setCurrent(value);
		await onLoadEntities(search);
	}

this my onPageChange function...

The only thing I saw it has been probably changed is the prop order into pagination-order.

Even though the example in the DOC is working, it's not working anyway as intended and the docs are not clear enough about how to set specific properties or which one to exclude.

Please also specify why the onPageChange needs to be an arrow function, because with my implementation, the page-change event is sending always 1 with both click on numbers or arrows.

Thanks

[mlmoravek]

@Nemesis19 I found the bug for the page-change event. Emitting a computed value right after if get changed, it somehow emits the old value. I also see this behaviour with the new defineModel macro. It's quite counterintuitive.

Could you be a bit more clear where the docs are misleading and what we can do to solve this?

The page-change event handler don't has to be an arrow function, is a normal Vue event.

[mlmoravek]

@Nemesis19 I think this is solved now for sure with v0.8.6 :D Could you confirm this?

[Nemesis19]

I'm sorry but due to the critical bugs ongoing lately with tables and autocompletes I downgraded to 0.7.0 which was the last perfectly working version.

I will eventually give some feedback whenever I'm upgrading again. Sorry not a priority right now.