Vue 高效清空表单

1. 暴力清空

data(){
  return {  
    form: {
      msg1: '',
      msg2: '',
      msg3: '',
    },
  }
},
methods: {
  submit() {
    //处理数据操作
    //......
    //清空表单
    this.form = {}
  }
}

若我们的数据有初始默认值,这种方式不太可取。

2. 赋值清空

data(){
  return {  
    form: {
      msg1: '',
      msg2: '',
      msg3: '',
    },
  }
},
created() {
  this.defaultForm = JSON.parse(JSON.stringify(this.form));
},
methods: {
  submit() {
    //处理数据操作
    //......
    //清空表单
    this.form = Object.assign({}, this.defaultForm)
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容