Dynamic populated q-select has unexpected behaviour.

[jaimie.avery]

Hi,

I’m dynamically creating input fields based on a schema passed to the component as a prop. I enumerate the schema items and create the corresponding input component in the template. This is all good and well until I get to a q-select.

For a select that is not multiple enabled the value is automatically set to the string value of the select. This is not so when the select is multiple enabled. The options prop is set but there is a type issue on the value. This is because the value needs to be an array, not a string.

So on the component create (or mount) event I also enumerate the schema array looking for multi-select and set a default value of the model to an empty array. Progress, the select now populates and can be used.

But there is a problem! The v-model assigned doesn’t update when you change the selected values. Furthermore, if you update another input alongside, it updates!

Heres a demo fiddle…

Please help…
Thanks
J

[zeidanbm]

This is due to how reactivity works in vue. Check this link to know more about this.
To fix your problem, you will need to tell vue that you are setting a new object on ‘this.input’. So by using this.$set() which is the same as Vue.set(), you are telling vue to assign setters and getters on this new object cuz it was created during runtime and vue needs a way to know about that.
So you will need to change this piece in your code:

if(i.type == 'Multiselect') {
    this.$set(this.input, i.name, []);
}

PS: Instead of using v-if-else you can do what you want using dynamic components. Read about it here. And actually since they are the same component and just different props you can do it using v-bind $attrs. This can be done in many ways and depends on the real situation you have on your actual code, but Check this Codepen maybe it will inspire you into something else or maybe not (also using vuex would make it much easier).