如何做到赋值另一个变量，其值改变，原来的值保持不变

Posted 2021-03-22 纯白棒球帽

项目中有一个问题是在一个下拉选择的表单，当改变其值时表单下边会出现新的特定的表单需要填写，所以在选择一个值的时候，进行下边的表单填写，但当此时再改变选择的值，下边的表单将变为初始值，当时是在created中把下边动态改变的表单初始的值保存下来，因为created只在渲染dom时运行一次

  <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域" @change="changeData">
          <el-option label="上海" value="shanghai"></el-option>
          <el-option label="北京" value="beijing"></el-option>
          <el-option label="山东" value="shanghai"></el-option>
          <el-option label="内蒙古" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <!-- 下边的数据根据上边的改变展开为初始值  -->
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="人员年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="活动地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="人员联系方式">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
    </el-form>


 data() {
    return {
      form: {
        region: "",
        name: "party",
        age: "",
        address: "",
        phone: ""
      },
      textData:{}
    };
  },
  methods: {
   //当改变值时将之前填写的表单数据变为原始的数据 
    changeData(){
      this.form =JSON.parse(this.textData) 
    }
  },
  created() {
    this.textData =JSON.stringify(this.form) ;
  },

主要的是用 JSON.parse（JSON.stringify(this.form)）保存下，若直接赋值，则一个值改变，另一个打印出来的也是改变以后的值，原理就是和堆和栈有关，所以要想变为原来的值需要保留原来的值，用这个办法