CODEWITHSUNDEEP
vue.js
Dominic
Dominic

Reputation: 510

VueJS: Sum up computed values to one computed value

I have a html form and based on the user input I want to give a total score of completion (e.g 80%). My plan is to do that with computed values that are watching seperate parts of the form and for the total score I want to sum them up like so:

simplified version of the vue file:

[..]
computed: {

      Chk_input1: function(){
          // Here will be a check if at least 4 characters in input field, if yes
          return 30
      },

      Chk_input2: function(){
        // Here will be a check if multiple conditions are met, if yes
          return 30
      },

      Chk_input3: function(){
        // Here will be a check if at least 4 characters in input field, if yes
          return 26
      },

      total_score: function(Chk_input1, Chk_input2, Chk_input3){
          // finally sum up the computed values input1 - input3
          return Chk_input1 + Chk_input2 + Chk_input3
      }
  },

But the result is: 

total_score =  [object Object]undefinedundefined%

How do I sum up these values properly?

Upvotes: 1

Views: 717

Answers (1)

Tanner
Tanner

Reputation: 2411

Wherever you're calling total_score, you're passing an object for the first argument, and undefined to the second two.

total_score should be written like this:

total_score: function() {
  return this.Chk_input1 + this.Chk_input2 + this.Chk_input3
}

The difference between my code and yours is that my code is accessing the other computed properties to return a sum, and yours is accepting arguments, which it accesses to calculate the sum.

Upvotes: 1

Related Questions