I am working with Vue.js within the Quasar framework to develop a hybrid app. At one point, I have a somewhat large form that I have split into subcomponents to deal with sections of input, and I’m using two-way binding via the .sync modifier (https://v2.vuejs.org/v2/guide/components.html#sync-Modifier, available in Vue 2.3.0+) to handle the data. I am then using computed properties to get and set each value in the parent. For example:
parent:
//html template
<parent>
<child :firstName.sync="required.firstName"></child>
</parent>
child:
//js
computed {
sync_firstName: {
get () {
return this.firstName
},
set (val) {
this.$emit('update:firstName', val)
}
}
}
This works well when I hardcode the v-model directive, as in <input type=“text” v-model=“sync_firstName”/> . However, when I assign the v-model attribute with a v-for directive (using :key and dynamically rendered :options), the model value is read but the computed property not accessed/evaluated, for instance:
<div v-for=“option in data>
<q-select v-model=“data[’name’]” :options=“data.options"></q-select>
</div>
According to the eslint plugin guide for v-model (https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-model.md), it is possible to use v-for to establish v-model properties. In my case, rendering the data {{ data.name }} shows the correct value (sync_firstName) — but this property is not then being evaluated (though the options values are being correctly rendered). However, if I hardcode the computed property <q-select v-model=“sync_firstName”></q-select>, the field renders perfectly. What am I missing?
Thanks!
