Tuesday, 21 September 2021

Changed object path and Dirty stages for nested objects in Vue state

Let's say I have an object contains some array of objects in some of its properties. Whenever I make changes in some fields whether it's a field in object in array or the root object, I want to define that object "dirty: true" with a code like this: object.defineProperty(path, '_dirty', true).

{
    "id": "48e143e5-eda0-490a-a87a-dbef128f539e",
    "parentId": null,
    "groups": [
        {
            "id": "142c7263-26ab-4169-88bb-5b2b880f3b97",
            "overviewId": "48e143e5-eda0-490a-a87a-dbef128f539e",
            "parts": [
                {
                    "id": "730adbca-20c0-427a-8228-7000d0553466",
                    "overviewGroupId": "142c7263-26ab-4169-88bb-5b2b880f3b97",
                },
                {
                    "id": "9c749aa0-b1c0-49cd-81c1-272d9bfe5df7",
                    "overviewGroupId": "142c7263-26ab-4169-88bb-5b2b880f3b97",
                }
            ],
        }
    ],
    "templateInfo": {
        "id": "34d2be1c-9b4e-4eb2-b452-82c7929057c8",
        "name": "Standart OV",
        "parentId": null,
        "typeId": 0,
        "storeId": "ee7bdc31-8c13-4111-9225-cb780b46e1a1"
    },
    "pageTypeInfo": {
        "id": "016ef17a-4cd7-4096-b387-6b16c39df41e",
        "typeId": 3,
        "code": "code A",
    }
}

I am storing this object in data like this:

data() {
    return {
        source: {},
    }
},

and have a watcher:

source: {
    handler(newValue, oldValue){
        console.log(...arguments)
    },
    deep: true
}

Is it possible to have the changed path like "groups[0].parts[1].id" and make the _dirty true for targeted object which in the path when change occurs?



from Changed object path and Dirty stages for nested objects in Vue state

No comments:

Post a Comment