[Solved] QSelect Not Displaying Correctly when the v-model is Set Programmatically
-
Good day, I’m currently using
q-select
component to programmatically select an option. In the first page, I pass a query parameter resembling the category ID to select on the next page, like this:this.$router.push({ path: '/notes', query: { categoryId } })
On the next page, I programmatically set the
categoryId
with the value of the query parameter like this (tried putting it oncreated
,mounted
,activated
life cycle hook):<q-select v-model="categoryId" label="Category" style="width: 100%;" stack-label emit-value map-options use-input fill-input hide-selected :options="categoryOptions" @input="onCategorySelect" input-debounce="0" class="q-mb-sm"/> ... data () { return { categoryId: 0, categories: [] } }, computed: { categoryOptions () { return [ { label: 'Mathematics', value: 2 }, { label: 'Electronics', value: 6 } ] } } .... // also tried created and mounted life cycle hook async activated () { this.categoryId = this.$route.query.categoryId }
This makes the value displayed in
q-select
component to become thecategoryId
as seen here:
When the
q-select
is clicked manually and an option is selected, everything works fine though.
Is there a way to fix this issue? Thanks! -
@snowdrop use
map-options
&emit-value
props since you are using an object form, and because of that, the value that you assign to your model should map from options. iethis.categoryId = this.categoryOptions....// find the category id from your options
.
https://codepen.io/metalsadman/pen/wvBdzJa?editors=1010 -
@metalsadman Au, I’m sorry, I missed the copy-paste of the code for
map-options
andemit-value
. There should bemap-options
andemit-value
in the code. I will update it now. Thanks for pointing that out. But even withmap-options
andemit-value
, the issue still persists. I’ll try checking other factors that might have caused this. -
@snowdrop yep, you can’t just give the model a plain value, it should abide by your options format.
-
@metalsadman Seems to be an issue with my browser cache. It’s working fine now. Thanks!
-
@metalsadman I’ve gone back in my work after a few hours and seems that it’s not the browser cache that is causing the issue, the problem is still there. Seems that earlier is just a glitch.
-
This post is deleted! -
I also updated the description and the code.
-
Finally found the issue. Seems that I need to put the following code in both
created
andactivated
life cycle hook:this.categoryId = this.$route.query.categoryId
I don’t know the reason behind but it’s now working.