Reactivity Issue

[mr-Sepi0l]

Hey There,

I migrate my app recently from vue 3 to Quasar and facing a quite odd issue.
After hours of searhcing and debugging, I was able to find out that it is caused by some unexpected reactivity.
Here is the case:

I have a Form class which handles all my forms.

I have a modal which contains a form with 2 fields a name and a color. Compenent is working and updating the entity.
The problem is, whenever I click the submit button, my form fields reset to default before the xhr request even finish. (So user see form fields changes to old values before the modal toggle off).

Let's say I have by default a #000 color on my entity and change it to #fff. When i press submit the value come back to #000.
(As i show the color in the input background, user notices it for sure).

After hours of investigations, I found out that the this.isLoading = true in my Form.submit method trigger that reset. I'm almost sure it is related to reactivity. Updating a node in my form class make the whole object reset (But when I send it it contains the right data).

Another point which is suprising is that when I console.log(this) before and after the line this.IsLoading = true the preview dump shows right results but when unfold the data in console it shows default data. I'm a bit confused on how to fix that issue...

import { api } from 'boot/axios';

class Form {
    constructor(data) {
        this.originalData = JSON.stringify(data);

        Object.assign(this, data);

        this.errors = {};
        this.submitted = false;
        this.isLoading = false;
    }

    getData() {
        return Object.keys(JSON.parse(this.originalData)).reduce((data, attribute) => {
            data[attribute] = this[attribute];

            return data;
        }, {});
    }

    post(endpoint, headers = {}, file = false) {
        return this.submit(endpoint, 'post', headers, file);
    }

    patch(endpoint, headers = {}, file = false) {
        return this.submit(endpoint, 'patch', headers, file);
    }

    delete(endpoint, headers = {}) {
        return this.submit(endpoint, 'delete', headers);
    }

    submit(endpoint, requestType = 'post', headers = {}, formData = false) {
       // HERE IS THE LINE WHERE IT DO UNEXEPECTED THINGS
        this.isLoading = true;
        let data;

        if (formData) {
            data = new FormData();
            const dataObject = this.getData();

            if (requestType === 'patch') {
                data.append('_method', 'patch');
                requestType = 'post';
            }

            for (const key in dataObject) {
                if (['file', 'invoice', 'img', 'avatar', 'picture'].includes(key)) {
                    if (dataObject[key]) {
                        console.log('Should be Okay');
                        data.append(key, dataObject[key]);
                    }
                } else {
                    if (dataObject[key] !== null) {
                        const isObject = dataObject[key] === Object(dataObject[key]);

                        data.append(key, isObject ? JSON.stringify(dataObject[key]) : dataObject[key]);
                    }
                }
            }
        } else {
            data = this.getData();
        }

        if (requestType === 'delete') {
            return api[requestType](endpoint, { data: { source: data } }, { headers })
                .catch(this.onFail.bind(this))
                .then(this.onSuccess.bind(this));
        }

        return api[requestType](endpoint, data, { headers })
            .catch(this.onFail.bind(this))
            .then(this.onSuccess.bind(this));
    }

    onSuccess(response) {
        this.submitted = true;
        this.isLoading = false;
        this.errors = {};

        return response;
    }

    onFail(error) {
        this.errors = error.response.data.errors;
        this.submitted = false;
        this.isLoading = false;

        throw error;
    }

    formatError() {
        let message = '';

        Object.keys(this.errors).forEach(key => {
            message += this.errors[key][0] + (this.errors[key + 1] ? '<br>' : '');
        });

        return message;
    }

    reset() {
        Object.assign(this, JSON.parse(this.originalData));
    }
}

export default Form;

Here is my module file:

import Form from 'src/helpers/Form.js';
import { reactive } from 'vue';
import ProjectService from 'src/services/project.service.js';
import { useError } from 'src/modules/useError.js';
import { useQuasar } from 'quasar';
import { useAuth } from 'src/stores/auth-store.js';
import { useCompany } from 'src/stores/company-store.js';

export function useProjectForm(emit, modal, project = null, isDefault = false) {
    const auth = useAuth();
    const companyStore = useCompany();
    const $q = useQuasar();
    const { onError } = useError();
    const form = reactive(new Form(isDefault
        ? {
            name: project?.name || '',
            color: project?.color || '#000000',
            otherData: { id: someId }
        }
        : {
            name: project?.name || '',
            color: project?.color || '#000000',
            yetAnotherData: { id: someId }
        }
    ));

    const save = () => {
        if (project) {
            return ProjectService.update(form, project.id)
                .then(({ data }) => onSuccess('updated', data.data))
                .catch(error => onError(error, form));
        } else {
            return ProjectService.store(form)
                .then(({ data }) => onSuccess('added', data.data))
                .catch(error => onError(error, form));
        }
    };

    const onSuccess = (event, data) => {
        ... emit data, notify.....
    };

    return {
        form,
        save
    };
}

And finally here is my component, simple modal form

<template>
    <q-dialog v-bind="$attrs" persistent rounded ref="modal">
        <q-card class="rounded-modal minw-50vw">
            <q-form @submit="save" @reset="null">
                <q-card-section class="text-h4">
                    {{ currentProject.name }}
                </q-card-section>
                <q-card-section>
                    <q-input type="text"
                             v-model="form.name"
                             filled
                             hide-bottom-space
                             :rules="[val => !!val || 'Vous devez renseigner un nom pour votre projet !']"
                             label="Nom du projet"
                    />
                    <div>
                        <h6 class="q-pl-xs q-mt-md q-mb-xs">Couleur</h6>
                        <div class="flex justify-evenly">
                            <q-input filled
                                     v-model="form.color"
                                     class="full-width"
                                     :style="{background: form.color}"
                                     :input-style="{color: lightenColor}"
                                     hide-bottom-space
                                     :rules="[val => !!val || 'Vous chosir une couleur de projet !']"
                            >
                                <template v-slot:append>
                                    <q-icon name="colorize" class="cursor-pointer" :style="{color: lightenColor}">
                                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                                            <q-color v-model="form.color" format-model="hex"/>
                                        </q-popup-proxy>
                                    </q-icon>
                                </template>
                            </q-input>
                        </div>
                    </div>
                </q-card-section>

                <q-separator color="grey-4" class="q-mt-xs"/>

                <q-card-actions class="full-width" align="between">
                    <q-btn label="Annuler"
                           filled
                           color="grey-3"
                           text-color="grey-8"
                           class="col-grow"
                           unelevated
                           v-close-popup="form.reset()"
                           :no-caps="true"/>

                    <q-btn label="Enregistrer" color="primary"
                           :loading="form.isLoading"
                           type="submit"
                           :no-caps="true"
                           unelevated
                           class="col-grow"/>
                </q-card-actions>
            </q-form>
        </q-card>
    </q-dialog>
</template>

<script>
    import { computed, ref } from 'vue';
    import { useProjectForm } from 'src/modules/useProjectForm.js';
    import Helpers from 'src/helpers/helpers.js';

    export default {
        name: 'EditProjectModal',
        props: {
            project: {
                required: true,
                type: Object
            }
        },
        setup: (props, { emit }) => {
            const currentProject = computed(() => props.project);
            const modal = ref(null);
            const {
                form,
                availableColors,
                save
            } = useProjectForm(emit, modal, currentProject.value);
            const lightenColor = computed(() => Helpers.lightenColor(form.color, 60));

            return {
                form,
                modal,
                availableColors,
                currentProject,
                lightenColor,
                save
            };
        }
    };
</script>