Issue with QInput v-model displaying refresh

[loopkin]

Hi all!

I have an issue with my code below: when i input data in the generated q-inputs labelled “field1” and “field2”, the underlying data is correctly impacted. but as soon as i put the focus out of the input, the original text is displayed again.
I’m obviously doing something wrong, but i can’t see what. Any help?

<template>
    <q-card style="width: 40rem">
        <q-form @submit="submitForm">
            <div v-if="showInput">
                <q-card-section class="q-pt-none">
                    <div class="row q-mb-sm">
			<q-select outlined v-model="requestToSubmit.profile"
			:options="profiles" label="Profile *" class="col"
			:rules="[val => !!val || 'Field is required']" />
		  </div>
                </q-card-section>
                <q-card-actions align="right" class="q-mb-md q-mr-md">
		   <q-btn label="Next" type="submit" color="secondary" no-caps unelevated/>
		</q-card-actions>
            </div>
            <div v-if="showDetails">
                <q-card-section class="q-pt-none">
                    <div v-for="(dataField, key) in this.requestToSubmit.req_data" :key="key" class="row q-mb-sm">
			<q-input
			outlined clearable :label="key"
			stack-label class="col"
			:readonly="!dataField.editable"
			v-model="requestToSubmit.data[key]" />
		</div>
                </q-card-section>
            </div>
        </q-form>
    </q-card>
</template>

<script>
export default {
    data () {
		return {
			showInput: true,
			showDetails: false,
			profiles: ['server'],
			requestToSubmit: {
				profile: '',
				req_data: {}
			}
		}
    },
    methods: {
        submitForm() {
            if (this.showInput) {
                this.requestToSubmit.req_data = { field1: { editable:true, default_value:"test" }, 
                                                    field2: { editable:false, default_value:"test2" } }
                this.requestToSubmit.data = { };
		for (const dataFieldName in this.requestToSubmit.req_data) {
			this.requestToSubmit.data[dataFieldName] = this.requestToSubmit.req_data[dataFieldName].default_value;
		}
                this.showInput=false;
                this.showDetails=true;
            }
        }
    }
}
</script>

[s.molinari]

Read this.

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Also, you are using array keys, but you are building objects.

Scott

[loopkin]

@s-molinari thanks, with this.$set the issue is solved indeed !