hexed bay
Hi everyone!
My Backend expects query params for filter use case to be like: http://localhost:3000/cats?search=i&filter.age=$gte:3
The Filter name includes a special char (.) -> e.g. &filter.age=
How do I provide the parameters that they are not ignored?
strange chasmBOT
Hi @hexed bay. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To handle special characters in query parameters when using useFetch() in Nuxt, you can use the query option and leverage JavaScript's object notation. Here's how you can approach this:
const age = ref(3)
const { data } = await useFetch('<http://localhost:3000/cats',> {
query: {
search: 'i',
'filter.age': `$gte:${age.value}`
}
})
In this example, we're using an object to define the query parameters. The key 'filter.age' is enclosed in quotes to preserve the dot notation. Nuxt will automatically encode these parameters correctly when constructing the URL.
This approach is based on the information provided in the Nuxt documentation on useFetch, which states that the query option "Adds query search params to URL using ufo".
It's worth noting that Nuxt uses the ufo library to handle URL operations, which should properly encode special characters in query parameters.
If you need to construct more complex URLs or have dynamic parameters, you can also use a computed URL as described in the Nuxt documentation on Computed URL.