Using function parameters within vuejs data object properties

Question

This is a method that I wrote for a Nuxt app that works just fine but as with many of my methods that do simple things like this, the code is verbose and I'd like for it to be more condensed.

How can I rewrite this so that num is placed in the proper places and repeating the logic is not required to accommodate different nums?

removeDependent(num) {
  if (num === 1) {
    this.dependent1 = false;
    this.employee.dependents[1].type = "";
    this.employee.dependents[1].products = [];
    this.employee.dependents[1].firstName = "";
    this.employee.dependents[1].lastName = "";
    this.employee.dependents[1].dob = "";
    this.employee.dependents[1].gender = "";
    this.employee.dependents[1].ssn = "";
  } else if (num === 2) {
    this.dependent2 = false;
    this.employee.dependents[2].type = "";
    this.employee.dependents[2].products = [];
    this.employee.dependents[2].firstName = "";
    this.employee.dependents[2].lastName = "";
    this.employee.dependents[2].dob = "";
    this.employee.dependents[2].gender = "";
    this.employee.dependents[2].ssn = "";
  } else if (num === 3) {
    this.dependent3 = false;
    this.employee.dependents[3].type = "";
    this.employee.dependents[3].products = [];
    this.employee.dependents[3].firstName = "";
    this.employee.dependents[3].lastName = "";
    this.employee.dependents[3].dob = "";
    this.employee.dependents[3].gender = "";
    this.employee.dependents[3].ssn = "";
  } else if (num === 4) {
    this.dependent4 = false;
    this.employee.dependents[4].type = "";
    this.employee.dependents[4].products = [];
    this.employee.dependents[4].firstName = "";
    this.employee.dependents[4].lastName = "";
    this.employee.dependents[4].dob = "";
    this.employee.dependents[4].gender = "";
    this.employee.dependents[4].ssn = "";
  } else if (num === 5) {
    this.dependent5 = false;
    this.employee.dependents[5].type = "";
    this.employee.dependents[5].products = [];
    this.employee.dependents[5].firstName = "";
    this.employee.dependents[5].lastName = "";
    this.employee.dependents[5].dob = "";
    this.employee.dependents[5].gender = "";
    this.employee.dependents[5].ssn = "";
  } else if (num === 6) {
    this.dependent6 = false;
    this.employee.dependents[6].type = "";
    this.employee.dependents[6].products = [];
    this.employee.dependents[6].firstName = "";
    this.employee.dependents[6].lastName = "";
    this.employee.dependents[6].dob = "";
    this.employee.dependents[6].gender = "";
    this.employee.dependents[6].ssn = "";
  } else if (num === 7) {
    this.dependent7 = false;
    this.employee.dependents[7].type = "";
    this.employee.dependents[7].products = [];
    this.employee.dependents[7].firstName = "";
    this.employee.dependents[7].lastName = "";
    this.employee.dependents[7].dob = "";
    this.employee.dependents[7].gender = "";
    this.employee.dependents[7].ssn = "";
  } else if (num === 8) {
    this.dependent8 = false;
    this.employee.dependents[8].type = "";
    this.employee.dependents[8].products = [];
    this.employee.dependents[8].firstName = "";
    this.employee.dependents[8].lastName = "";
    this.employee.dependents[8].dob = "";
    this.employee.dependents[8].gender = "";
    this.employee.dependents[8].ssn = "";
  } else if (num === 9) {
    this.dependent9 = false;
    this.employee.dependents[9].type = "";
    this.employee.dependents[9].products = [];
    this.employee.dependents[9].firstName = "";
    this.employee.dependents[9].lastName = "";
    this.employee.dependents[9].dob = "";
    this.employee.dependents[9].gender = "";
    this.employee.dependents[9].ssn = "";
  } else if (num === 10) {
    this.dependent10 = false;
    this.employee.dependents[10].type = "";
    this.employee.dependents[10].products = [];
    this.employee.dependents[10].firstName = "";
    this.employee.dependents[10].lastName = "";
    this.employee.dependents[10].dob = "";
    this.employee.dependents[10].gender = "";
    this.employee.dependents[10].ssn = "";
  }
  return null;
},

Boussadjra Brahim · Accepted Answer · 2020-11-24 20:56:11Z

3

Just use the num parameter as index :

removeDependent(num) {
 if(num){
    this[`dependent${num}`] = false;
    this.employee.dependents[num].type = "";
    this.employee.dependents[num].products = [];
    this.employee.dependents[num].firstName = "";
    this.employee.dependents[num].lastName = "";
    this.employee.dependents[num].dob = "";
    this.employee.dependents[num].gender = "";
    this.employee.dependents[num].ssn = "";
  } else return null;
}

edited Nov 24, 2020 at 20:56

answered Nov 24, 2020 at 19:48

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bryan Spearman Over a year ago

Could I use: this[dependent${num}] = false; With the required back ticks of course. Can't show those in the comments

Bryan Spearman Over a year ago

Answering my own question here... You can use a String Literal in the first statement. Thanks very much for the help @Boussadjra Brahim

Paridhi Jain · Accepted Answer · 2020-11-24 21:09:47Z

1

Some improvement from another answer, code can be shorten using best practices. Also return null is the default so no need to use it.

removeDependent(num) {
 if(num) {
    this[`dependent${num}`] = false;
    this.employee.dependents[num] = {
      type: "",
      products: [],
      firstName: "",
      lastName: "",
      dob: "",
      ssn: ""
    };
  }
}

answered Nov 24, 2020 at 21:09

Paridhi Jain

1905 bronze badges

1 Comment

Bryan Spearman Over a year ago

Thanks very much Paridhi. I like the neatness of this. Definite improvement.

Collectives™ on Stack Overflow

Using function parameters within vuejs data object properties

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related