How to remove the duplicated re-initialization code at my vuejs code

Question

While making user register form by vuejs, I made ugly code.

I want to refactor nicely, but lack of idea. Because of adding vuejs from the legacy code, I was not able to use vue cli. So I embedded vuejs with <script> tag.

what I want to make a class is

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

Here is my code.
https://codepen.io/pen/?editors=1111#

To clear existing form, I did manually clear it's property.

When I tried to reset with this.newUser = {}, it delete all my properties. But I do want to that.

How can I nicely refactor my code?

Create a deep copy of your initial object before the form can be filled out or use this: https://stackoverflow.com/questions/40340561/proper-way-to-re-initialize-the-data-in-vuejs-2-0/40856312#40856312 Also your codepen URL does not work. — Stephan-v, Sep 25 '18 at 08:24

score 0 · Accepted Answer · edited Sep 25 '18 at 17:28

maybe

       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;
           }
       }

How to remove the duplicated re-initialization code at my vuejs code

1 Answers1