[Vuejs]-How to initialize state with props without modifying props in vue 3

by

3👍

✅

You need to clone the object (make a new copy).

In javascript when assigning an object to a variable it doesn’t create a new copy of that object. Instead it assigns it by referencing the original object.

Therefore from the code in your question, doing { new_listing: this.listing } assigns a reference of the this.listing object to new_listing. Meaning that modifying new_listing would also modify this.listing:

To clone the object in ES6+ you can do the following. The ... is a spread syntax. In this case it’s a way to clone an object.

data() {
    return {
        new_listing: {...this.listing} //which is a prop
    }
}

If you’re not using ES6 check out What is the most efficient way to deep clone an object in JavaScript? to see how to clone an object.

Note: If the object contains objects (e.g. {a: {b: "h"}} then you will need to do a deep clone (clone objects within the objects).

👤Patrick

Leave a comment