[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 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:
    Screenshot_20191222_163949.png

    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.
    https://codepen.io/metalsadman/pen/wvBdzJa?editors=1010



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