The to-fn in q-pagination doesn't work in Quasar v2

[TheElderProcess]

Describe the bug
The to-fn in q-pagination doesn't work in Quasar v2

Codepen/jsFiddle/Codesandbox (required)
https://codepen.io/theelderprocess/pen/vYmLdoP

Expected behavior
It's expected that the to-fn will generate a link for each paging button, but it doesn't works, nothing generated, both in the CodePen and my developing environment.

Platform (please complete the following information):
Quasar Version: v2
@quasar/app Version: v3

Quasar mode:

• [*] SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• [*] SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: Linux or CodePen

[rstoenescu]

The function generates a route that the Vue Router does not recognizes. Example: { query: { page: 1 } }

[TheElderProcess]

The function generates a route that the Vue Router does not recognizes. Example: { query: { page: 1 } }

But :to-fn="page => ({ query: page})" is what the quasar's document recommended， it still doesn't work for me. How should I write the right to-fn function?

[rstoenescu]

I think that you are missing one important thing. You need to make sure that:

1. to-fn function returns an Object that Vue Router can understand and which defines a route. (example: same object that you'd use with a <router-link :to="....")
2. You are configuring the Vue Router routes correctly so that at least one route will match with the object returned by to-fn.

We're not recommending anything. We're showing examples. But obviously you need to sync with the Vue Router routes...

[TheElderProcess]

I think that you are missing one important thing. You need to make sure that:

1. to-fn function returns an Object that Vue Router can understand and which defines a route. (example: same object that you'd use with a <router-link :to="....")
2. You are configuring the Vue Router routes correctly so that at least one route will match with the object returned by to-fn.

We're not recommending anything. We're showing examples. But obviously you need to sync with the Vue Router routes...

So should I reconstruct the to-fn to fix the vue-router v4? But I write the to-fn in the old way, I can see nothing geneated for the pagination button throuh the vue-devtools. It worked well in the Quasar v1...

[m00nk]

I have got the same issue. The method related in :to-fn had not run at all.
Example: https://codepen.io/m00nk/pen/YzVwmJZ

<q-pagination
	v-model:modelValue="page"
	:max="5"
	:to-fn="getRoute"
/>

{
	data() { return { page: 1 }},
	methods: {
		getRoute(page){
			console.log('RUN!');
		}
	}
}

[rstoenescu]

Hmmm, the handler not running would indeed be a bug. Reopened to investigate.

[m00nk]

@rstoenescu any news?

[rstoenescu]

Fix will be available in Quasar v2.0.3.