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;
        },
Javascript
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:'',
    ...
}

Previous: Does the photo sphere viewer plug-in enable gravity sensing and vr functions?

Next: Vue reported an error in the chrome console. Which line does it look like?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3755f-2b5d2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3755f-2b5d2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?