Issue with QInput v-model displaying refresh



  • 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>
    


  • Read this.

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

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

    Scott



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


Log in to reply