No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    QSelect not updating when default value is set

    Help
    4
    6
    5653
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      smaldona last edited by

      Hi everybody!

      I’ve been dealing with an issue, and I’m not being able to understand what’s going on. I’m kinda new to Quasar and maybe I don’t understand the whole workflow… but I have searched the web for a few hours now, and found no answer… Hope somebody can help me.

      I have a simple QSelect element, that uses a v-model inside an array… (I need this because I’m loading an unknown list of elements inside a form).

      <q-select
        label="TestSelect"
        v-model="testModel['test']"
        :options="options"
        filled
        class="q-ma-md q-mt-lg">
      </q-select>
      
      data: function () {
          return {
            testModel: [],
            options: [
              {
                label: 'Google',
                value: 'goog'
              },
              {
                label: 'Facebook',
                value: 'fb'
              },
              {
                label: 'Twitter',
                value: 'twtr'
              },
              {
                label: 'Apple Inc.',
                value: 'appl'
              },
              {
                label: 'Oracle',
                value: 'ora'
              }
            ]
          }
        }
      

      The QSelect works as expected.

      But, if during completed() or mounted() I set a default value for the QSelect, it stops working. It doesn’t update with the selected value.

      mounted: function () {
          this.testModel['test'] = 'goog'
      }
      

      I found that if I add another value to the DOM and update that value, the QSelect gets updated as well with the last selected option.

      I made a codepen illustrating the situation: https://codepen.io/smaldona/pen/gObMYBY

      Any help or guidance will be greatly appreciated.

      Thanks in advance!

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

        Something wrong with your model, dunno what youre trying to do tho.

        1 Reply Last reply Reply Quote 0
        • S
          smaldona last edited by

          I need to load a list of fields with associated options (using axios), and render those QSelects inside a form using v-for… I want to have all v-models inside one array in data(), so I can use that array when submitting the form. I don’t know beforehand how many fields are going to be loaded… All fields have selected values when loaded.

          1 Reply Last reply Reply Quote 0
          • S
            smaldona last edited by smaldona

            Finally found the answer… I didn’t fully undestand Vue.js reactivity…

            https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

            Finally, if I replace

            mounted: function () {
                this.testModel['test'] = 'goog'
            }
            

            with

            mounted: function () {
                this.$set(this.testModel, 'test', 'goog')
            }
            

            it works as expected.

            Hope this helps somebody else.

            C J 2 Replies Last reply Reply Quote 0
            • C
              cynderkromi @smaldona last edited by

              @smaldona Thanks so much for this! I’ve adapted it to default a q-option-group to also have a default value, as I’ve been looking for this.

                  <q-option-group
                    v-model="buriedModel['buriedOff']"
                    :options="buriedOff"
                    color="primary"
                    inline
                  />
              
               data() {
                  return {
              buriedModel: [],
                  buriedOff: [
                      { label: 'Yes', value: 'Yes' },
                      { label: 'No', value: 'No' }  
                      ]
               }
              }
              
                  this.$set(this.buriedModel, 'buriedOff', 'No') // set radio button default to No
              
              
              1 Reply Last reply Reply Quote 0
              • J
                johnnyn @smaldona last edited by

                @smaldona this solved my problem, thanks. Also this is weird the way it has to be done like this.

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post