【注意】vue中v-model绑定的Object变量赋值给了另一个Object变量后，两个变量同时改变的问题

 

<el-select v-model="formData" placeholder="请选择" size="medium" @change="typeChange">
    <el-option>
     .........
    </el-option>
</el-select>

data() {
      return {
        formData: {
          timeStart: '',
          timeEnd: ''
        },
        submitForm: {
          timeStart: '',
          timeEnd: ''
        },
    }

赋值：

this.submitForm = this.formData

但是！！！

当formData发生变化时，submitForm 竟然也跟着变了

这是因为在Object赋值的时候，传递的不是值，而是引用，它们指向了同一个空间！

解决

第一种：利用 JSON.parse 和 JSON.stringify

this.submitForm = JSON.parse( JSON.stringify(this.formData) )

第二种：ES6 的解析语法

this.submitForm = { ...this.formData }