如何在我的Vue.js代码中删除重复的重新初始化代码

Question

通过vuejs制作用户注册表单时，我编写了难看的代码。

我想很好地重构，但是缺乏主意。由于从旧版代码中添加了vuejs，因此我无法使用vue cli。所以我用<script>标签嵌入了vuejs。

我想上课的是

newUser : {
          "email": '',
          "firstName": '',
          "lastName": '',
          "additionalInfo":{
            "phone": '',
            "description":''
           },
          "authority":"TENANT_ADMIN",
          "tenantId":{
            "entityType": "TENANT",
            "id": ''
          },
          "customerId": {
            "entityType": "CUSTOMER",
            "id": ''
          }
        }

这是我的代码。
https://codepen.io/pen/?editors=1111#

要清除现有表格，我确实手动清除了它的属性。

当我尝试使用this.newUser = {}重设时，它将删除我的所有属性。但是我确实想要那个。

如何很好地重构代码？

Answer 1

也许

       class ... {

          default = {
             "email": '',
             "firstName": '',
             "lastName": '',
             "additionalInfo":{
               "phone": '',
               "description":''
              },
             "authority":"TENANT_ADMIN",
             "tenantId":{
               "entityType": "TENANT",
               "id": ''
             },
             "customerId": {
               "entityType": "CUSTOMER",
               "id": ''
             }
           }

           newUser = {}

           constructor() {
             this.init();
           }

           init() {
             this.newUser = this.default;
           }

           clear() {
             this.newUser = this.default;
           }
       }