QSelect not updating when default value is set



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



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



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



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


Log in to reply