[Solved] QSelect Not Displaying Correctly when the v-model is Set Programmatically

[snowdrop]

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 on created, 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 the categoryId 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!

[metalsadman]

@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. ie this.categoryId = this.categoryOptions....// find the category id from your options.
https://codepen.io/metalsadman/pen/wvBdzJa?editors=1010

[snowdrop]

@metalsadman Au, I’m sorry, I missed the copy-paste of the code for map-options and emit-value. There should be map-options and emit-value in the code. I will update it now. Thanks for pointing that out. But even with map-options and emit-value, the issue still persists. I’ll try checking other factors that might have caused this.

[metalsadman]

@snowdrop yep, you can’t just give the model a plain value, it should abide by your options format.

[snowdrop]

@metalsadman Seems to be an issue with my browser cache. It’s working fine now. Thanks!

[snowdrop]

@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.

[snowdrop]

This post is deleted!

[snowdrop]

I also updated the description and the code.

[snowdrop]

Finally found the issue. Seems that I need to put the following code in both created and activated life cycle hook:

this.categoryId = this.$route.query.categoryId

I don’t know the reason behind but it’s now working.