QSelect not updating when default value is set

smaldona

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!

metalsadman

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

smaldona

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.

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.

cynderkromi

@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