Reinitialize the nested property of an object in JavaScript

Question

Reinitialize the nested property of an object in JavaScript

I've encountered an issue while using the Vue3 composition API where attempting to reset a form with nested properties using Object.assign does not work as expected.

const initialForm = {
    name: "",
    details: {
        type: ""
    }
};

const form = reactive({ ...initialForm });

const resetForm = () => {
    Object.assign(form, initialForm);
}

Although the "name" property is successfully reset, the "details.type" property remains unchanged. Any suggestions on how to properly reset the entire form including nested properties?

javascript vue.js

Answer 1

Answer №1

When using the spread operator ... and Object.assign, keep in mind that they only perform a shallow copy.

This means that nested references are not changed. So, the value of details.type from the initialForm remains the same in form.details.type.

To effectively copy an object deeply when assigning to form or when resetting the form, you will need to use a method like _.cloneDeep.

const initialForm = {
    name: "",
    details: {
        type: ""
    }
};

let form = reactive(_.cloneDeep(initialForm));

const resetForm = () => {
    form = _.cloneDeep(initialForm);
}

If you prefer not to rely on external packages like lodash:

const initialForm = {
    name: "",
    details: {
        type: ""
    }
};

let form = {...initialForm, details: {...initialForm.details}};

const resetForm = () => {
    form = {...initialForm, details: {...initialForm.details}};
}

Answer 2

When using the spread operator ... and Object.assign, keep in mind that they only perform a shallow copy.

This means that nested references are not changed. So, the value of details.type from the initialForm remains the same in form.details.type.

To effectively copy an object deeply when assigning to form or when resetting the form, you will need to use a method like _.cloneDeep.

const initialForm = {
    name: "",
    details: {
        type: ""
    }
};

let form = reactive(_.cloneDeep(initialForm));

const resetForm = () => {
    form = _.cloneDeep(initialForm);
}

If you prefer not to rely on external packages like lodash:

const initialForm = {
    name: "",
    details: {
        type: ""
    }
};

let form = {...initialForm, details: {...initialForm.details}};

const resetForm = () => {
    form = {...initialForm, details: {...initialForm.details}};
}

Reinitialize the nested property of an object in JavaScript

Answer №1

Similar questions

Vue 3 required but not found as a peer dependency

Guide to ensuring every request in an Express.js application contains a cookie

Lost variable during the ajax call

"Setting the minimum length for multiple auto-complete suggestions in

JavaScript causing Axios network error

Node.js function failing to return any value

Executing a secondary function only once after a repeated condition has been met

Exploring the differences between arrays and objects provided by users

Managing browser window close events in a Vue.js application

My onClick AngularJS function contains a for loop that is not functioning properly upon initial click

Error: The React component throws a TypeError because it is unable to read the property 'map' from an undefined source

Exploring MongoDB's dynamic Child Object access functionality in a PHP environment

The Vue3 component fails to render after being imported through the options API

Is it possible for me to introduce an additional variable to the String.prototype object?

HtmlButton failing to execute client-side validation on IE11

Encountered a 'Require() of ES Module' Error while Implementing Visx with Nextjs

Initially Missing Child Props in Parent Component

What is the best way to implement CSS properties on Material UI components?

Ways to remove a

Tips and tricks for implementing pagination with jquery and jsp