Js vue better initializes properties in data

the project uses vue, because it is used as a background management system, so it involves a lot of input boxes, each of which has v-model binding properties. The scenario is: the page has a "refill" operation, at which point, all the data should be cleared. At present, my practice is that each input box is bound to a separate property as a property of the data object. When you click"re-fill", you need to empty it one by one, which doesn"t feel good. The wild road son comes from, hope to consult your practice. I hope to get your advice. The code is as follows:

data(){
        return {
            modalOrder:"",
            modalMachineName:"",
            modalWorkshopName:"",
            modalProcessName:"",
            modalRepairName:"",
            modalRepairTime:"",
            modalMaintainName:"",
            modalOrderName:"",
            modalOrderTime:"",
            modalOrderState:"",
            ...........
}

initEvent(){
            this.editModalStatus = false;
            this.modalOrder = "";
            this.modalMachineName = "";
            this.modalWorkshopName = "";
            this.modalProcessName = "";
            this.modalRepairName = "";
            this.modalRepairTime = "";
            this.modalMaintainName = "";
            this.modalOrderName = "";
            this.modalOrderTime = "";
            this.modalOrderState = "";
            this.modalFaultDescribe = "";
            this.modalRepairDescribe = "";
            this.modalRepairStart = "";
            this.selectFaultTypeId = "";
            this.modalRepairOver = "";
            this.modalFaultType = "";
            this.isRepair = "";
            this.replacePart = "";
            this.checkObj = null;
        },
Sep.16,2021

initialize the data object

initEvent(){
    this.$data = JSON.parse(JSON.stringify(this.initData))
}
  created(){
      this.initData = JSON.parse(JSON.stringify(this.$data)) 
    }

A deep copy of the initial value exists in one place (anywhere), and then the value is assigned when initialized.
and data definition. I think you'd better write it

.
modal:{
    order:'',
    machineName:'',
    ...
}
Menu