[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:

         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"
                        style="width: 100%;"
    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!

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

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

  • @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 and activated life cycle hook:

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

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

Log in to reply