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.
-
@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
-
@smaldona this solved my problem, thanks. Also this is weird the way it has to be done like this.