vue js中不需要的数据绑定

Question

我的应用程序中有一个编辑表单。创建此组件时，将发送http请求，并将响应数据保存在两个不同的变量中。

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

和“this.form”与表单输入绑定。

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

我的问题是：当输入字段改变时，“this.formInit”对象也会改变。但我没有将“this.formInit”与输入字段绑定。

“this.formInit”不应该包含来自响应的初始数据吗？

为什么会发生这种不必要的绑定？

我的目标是比较“this.form”＆amp; “this.formInit”用于检查用户是否在更改表单之前更改了某些字段。

Answer 1

您可以使用Object.assign创建新对象：

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