How to stop variable responsiveness in Vue 3?

Question

I'm using Nuxt 3 and I need to stop the responsiveness of reactive constants. I have a formData object and once submit is clicked I need to remove some keys from the formData object.

I have assigned formData to another variable submitData and then used delete submitData.key to delete the key but it also deletes the key from formData and I want it not to Delete formData object.

Answer 1

You can create a shallow copy of formData.

const submitData = { ...formData };

Or use lodash's `cloneDeep` to make a deep copy.

const submitData = _.cloneDeep(formData);

Both create a new object with the same properties and values ​​as the original object. However, the new object is a separate entity in memory from the original object. Modifications to the copy do not affect the original formData object.