Unwanted data binding in vue js

Question

I have a edit form in my application. When this component is created http request is sent and response data is saved in two different variables.

axios.get(this.initializeURL)
    .then((res) => {
        this.form = res.data.form
        this.formInit = res.data.form
    })

and "this.form" is binded with form inputs.

<input type="text" class="form-control" id="name" v-model="form.name">

My problem is : When the input fields are changed "this.formInit" object is also changed. but i haven't bind "this.formInit" with input fields.

Isn't the "this.formInit" supposed to contain the initial data from the response ?

Why is this unwanted binding happening ?

My goal is to compare "this.form" & "this.formInit" to check if the user changes some fields before tring to update the form.

CD.. · Accepted Answer · 2017-05-03 09:37:43Z

1

You can create a new object using Object.assign:

axios.get(this.initializeURL)
    .then((res) => {
        this.form = Object.assign({}, res.data.form),
        this.formInit = res.data.form
    })

answered May 3, 2017 at 9:37

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1