js赋值变了,被赋值的对象也变了。封装组件时,初始化一个对象,将初始化对象赋值给另一个对象,与form表单双向绑定,form表单变了,与form表单双向绑定的值也变了,最终导致初始化对象改变

就是在封装组件时,初始化一个initForm对象,然后将这个对象赋值给一个formDat对象,传入form组件与form表单双向绑定。当form表单改变了,会引起formDat改变。然后想重置表单时,再令formData = initForm。这个时候form并不会重置清空。我就感到很纳闷。

<script>
import baseForm from '@/base-ui/base-form/index.js'
  export default {
    components: {
      baseForm
    },
    props: {
      formItems: {
        type: Array,
        default: () => ([])
      },
      labelWidth: {
        type: String,
        default: '90px',
      },
    },
    data() {
      return {
        formData: {},
        initFormData: {}
      }
    },
    created() {
      this.init()
    },
    computed: {

    },
    methods: {
      init() {
        this.formItems.forEach(item => {
          this.initFormData[item.field] = ''
        });
        this.formData = this.initFormData
      },
      resetHandle() {
	  //这个时候重置表单并没有效果
        this.formData = this.initFormData
      },
      searchClick() {
        console.log(this.formData, 'formDATA')
      }
    }
  }
</script>

然后仔细一想,原来这是浅拷贝,都是共享一个存储地址,所以一个改变的时候另一个也会改变

所以重置的时候要再调用一遍init()将form重置

    resetHandle() {
        this.init()
      },
上一篇:使用formData实现数据与文件的提交


下一篇:elementUI中upload自定义上传行为 http-request属性