@metalsadman Thank you for your quick answer, but the problem was on another place. It was connected rather with Vue.js than with Quasar Framework.
Here is my problematic code (very simplified):
<div class="col-2 q-mr-md" v-for="option in editRowOptions" :key="option._id">
<component :is="option.type" :label="option.label" :key="option._id" v-model="editedRow[option.model]"></component>
</div>
<script>
data: () => ({
editRowOptions: [ {type: 'QInput', _id: '50m', model: '50m_model', label: '50 m run'} ], // dynamically loaded
editedRow: {}
}),
methods: {
editRow() {
this.editedRow = { _id: 22 };
// below values are filled in a loop which has dynamic content. That's why they are not set directly in row above
this.editedRow['50m_model'] = '12:25';
// ^^^^ problematic row
}
}
</script>
The root problem was that attributes set later (they were not initialized in object { _id: 22 }
) are missing Vue’s reactiveGetters and reactiveSetters.
Here’s my solution:
...
editRow() {
const _editedRow = { _id: 22 };
_editedRow['50m_model'] = '12:25';
this.editorPerson = Object.assign({}, _editorPerson);
}