If the HTML structure is:
<div id="app">
<button @click="doEditing">Edit</button>
<input v-if="editing" v-model="editing.profile.name" />
<span>{{ user.profile.name }}</span>
</div>
And Vuejs setup is:
var app = new Vue({
el: '#app',
data: {
user: {name: 'Foo'},
editing: null
},
methods: {
doEditing(){
this.editing = {...this.user};
}
}
})
Despite using this.editing = {...this.user}; to spread the object, it actually assigns it by reference. This results in unexpected behavior when editing the input field and changing this.user.
I also attempted to use Object.assign, but it did not resolve the issue.