CODEWITHSUNDEEP
vue.jsnuxt.js
Bryan Spearman
Bryan Spearman

Reputation: 51

Using function parameters within vuejs data object properties

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

Upvotes: 1

Views: 60

Answers (2)

Paridhi Jain
Paridhi Jain

Reputation: 190

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

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 3

Related Questions