title: Incrementing Variable in v-for Loop by Amount Returned from Method
body: <p>I have a table that uses v-for to loop through an object of days returned from using axios. I've given the ability to manipulate a variety of booleans on each row which change some calculated values in some columns. What I need is to calculate the total of these columns in a bottom row accounting for changes from the values in the rest of the table.</p>
  
  <p>I've tried calling on a method to do something like this.total.b2cTotal += someNumber; but it bugs out the page.</p>
  
  <p>the code</p>
  
  <pre class="lang-html prettyprint-override"><code>            &lt;table v-if="userSelect != 0" class="w-full text-md bg-white shadow-md rounded mb-4 reports text-sm"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;th v-if="userSelect == 'all'" class="text-left p-3 px-5"&gt;User Name&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;Day&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;Show Code&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;Day Type&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;Sch. (hrs)&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;Actual&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;Reg&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;OT&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;1.5x&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;DT&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;Rate&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;B2C?&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;OT Apr?&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;OT B2C?&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;PD?&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;PD $&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;TRV?&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;B2C Labor&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;B2C OT&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;FT Labor&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;FT OT&lt;/th&gt;
                          &lt;th class="text-left p-3 px-5"&gt;Worker Paid&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tr class="text-center" v-for="(day,index) in userDays" :key="index"&gt;
                          &lt;td v-if="userSelect == 'all'" class="p-3 px-5"&gt;{{ day.userName }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ day.date }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ day.projectCode }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;tbd&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ day.scheduledHours }}&lt;/td&gt;
                          &lt;td class="p-3 px-5 font-bold"&gt;{{ day.actualHours }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ day.regHours }}&lt;/td&gt;
                          &lt;td class="p-3 px-5 font-bold"&gt;{{ day.otHours }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ day.timeAndAHalfHours }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ day.doubleTimeHours }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ day.costRate }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt; &lt;!-- billable to client --&gt;
                              &lt;img v-if="day.billable == 1" @click="(toggleDayBoolean(day.dayID,'billable','disable'),day.billable = 0)" src="https://img.icons8.com/ultraviolet/22/000000/checked-2.png"&gt;
                              &lt;img v-if="day.billable == 0" @click="(toggleDayBoolean(day.dayID,'billable','enable'),day.billable = 1)" src="https://img.icons8.com/officel/22/000000/stop.png"&gt;
                          &lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt; &lt;!-- over time --&gt;
                              &lt;img v-if="day.otApproved == 1" @click="(toggleDayBoolean(day.dayID,'otApproved','disable'),day.otApproved = 0)" src="https://img.icons8.com/ultraviolet/22/000000/checked-2.png"&gt;
                              &lt;img v-if="day.otApproved == 0" @click="(toggleDayBoolean(day.dayID,'otApproved','enable'),day.otApproved = 1)" src="https://img.icons8.com/officel/22/000000/stop.png"&gt;
                          &lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt; &lt;!-- over time --&gt;
                              &lt;img v-if="day.otBillable == 1" @click="(toggleDayBoolean(day.dayID,'otBillable','disable'),day.otBillable = 0)" src="https://img.icons8.com/ultraviolet/22/000000/checked-2.png"&gt;
                              &lt;img v-if="day.otBillable == 0" @click="(toggleDayBoolean(day.dayID,'otBillable','enable'),day.otBillable = 1)" src="https://img.icons8.com/officel/22/000000/stop.png"&gt;
                          &lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt; &lt;!-- per diem --&gt;
                              &lt;img v-if="day.pdApproved == 1" @click="(toggleDayBoolean(day.dayID,'pdApproved','disable'),day.pdApproved = 0)" src="https://img.icons8.com/ultraviolet/22/000000/checked-2.png"&gt;
                              &lt;img v-if="day.pdApproved == 0" @click="(toggleDayBoolean(day.dayID,'pdApproved','enable'),day.pdApproved = 1)" src="https://img.icons8.com/officel/22/000000/stop.png"&gt;
                          &lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ day.pdAmount }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt; &lt;!-- travel --&gt;
                              &lt;img v-if="day.travel == 1" @click="(toggleDayBoolean(day.dayID,'travel','disable'),day.travel = 0)" src="https://img.icons8.com/ultraviolet/22/000000/checked-2.png"&gt;
                              &lt;img v-if="day.travel == 0" @click="(toggleDayBoolean(day.dayID,'travel','enable'),day.travel = 1)" src="https://img.icons8.com/officel/22/000000/stop.png"&gt;
                          &lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ costDistributor('b2c',day).b2c }} &lt;div v-text="addTo()"&gt;&lt;/div&gt;&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ costDistributor('b2cOT',day).b2cOT }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ costDistributor('ft',day).ft }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ costDistributor('ftOT',day).ftOT }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;
                              &lt;strong&gt;${{ day.totalCost + day.pdAmount }}&lt;/strong&gt;&amp;nbsp;
                              &lt;span class="view-icon"&gt;&lt;a target="dayView" :href='"/tracker/resources/days/"+day.dayID' class="cursor-pointer text-70 hover:text-primary mr-3" data-testid="projects-items-3-view-button" dusk="10-view-button" title="View"&gt;
                                  &lt;img src="https://img.icons8.com/ultraviolet/40/000000/visible.png"&gt;&lt;/a&gt;&lt;/span&gt;
                              &lt;!-- &lt;span class="lock-icon"&gt;&lt;a href="" class="cursor-pointer text-70 hover:text-primary mr-3" data-testid="projects-items-3-view-button" dusk="10-view-button" title="View"&gt;
                                  &lt;img src="https://img.icons8.com/ultraviolet/40/000000/lock.png"&gt;&lt;/a&gt;&lt;/span&gt; --&gt;
                          &lt;/td&gt;
  
                      &lt;/tr&gt;
                      &lt;tr v-if="userSelect!=0" class="font-bold text-lg"&gt;
                          &lt;td v-if="userSelect == 'all'" class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ finalTotal(userSelect,'scheduledHours') }} hrs&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ finalTotal(userSelect,'actualHours') }} hrs&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ finalTotal(userSelect,'otHours') }} hrs&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ finalTotal(userSelect,'timeAndAHalfHours') }} hrs&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{ finalTotal(userSelect,'doubleTimeHours') }} hrs&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ finalTotal(userSelect,'pdAmount') }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;{{  }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ addToTotal('show','b2c',0) }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ finalTotal(userSelect,'b2cOT') }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ finalTotal(userSelect,'ft') }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ finalTotal(userSelect,'ftOT') }}&lt;/td&gt;
                          &lt;td class="p-3 px-5"&gt;${{ finalTotal(userSelect,'totalCost') }}&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><em>I added in the finalTotal code though it's irrelevant to what I'm trying to solve</em></p>
  
  <pre class="lang-js prettyprint-override"><code>methods: {
          /**
           * distribute costs to company or client
           * 
           * @param string
           * @param App\CrewCallReports@getUserDays object
           * 
           * @return object
           */
          costDistributor(type,day){
              let totals = {
                  b2c: 0,
                  b2cOT: 0,
                  ft: 0,
                  ftOT: 0,
                  b2cTotal: 0
              };
  
              switch(type){
                  case 'b2c':
                      if(day.billable &amp;&amp; day.regHours == 'straight'){
                          // if straight time then bill actual hours
                          if(day.billable){
                              totals.b2c = day.costRate * day.actualHours;
                              totals.b2cTotal += totals.b2c;
                          }
                          // if pd approved then add it
                          if(day.pdApproved){
                              totals.b2c += day.pdAmount;
                              totals.b2cTotal += day.pdAmount;
                          }
                      }else if(day.billable &amp;&amp; day.regHours != 'straight'){
                          // if not straight time but billable to client
                          if(day.billable){
                              totals.b2c = day.costRate * day.regularHours;
                              totals.b2cTotal += totals.b2c;
                          }
                          // if pd approved then add it
                          if(day.pdApproved){
                              totals.b2c += day.pdAmount;
                              totals.b2cTotal += day.pdAmount;
                          }
                      }else if(!day.billable){
                          // no labor charged to client
                          totals.b2c = 0;
                          totals.b2cTotal += totals.b2c;
                          // in case pd applies but regular labor doesn't (weird case)
                          if(day.pdApproved){
                              totals.b2c += day.pdAmount;
                              totals.b2cTotal += day.pdAmount;
                          }
                      }
                      // we need to add travel into this formula
                  break;
  
                  case 'ft':
                      if(!day.billable &amp;&amp; day.regHours == 'straight'){
                          // add base hour cost
                          if(!day.billable){
                              totals.ft = day.costRate * day.actualHours;
                          }
                          // add per diem if applicable
                          if(!day.pdApproved){
                              totals.ft += day.pdAmount;
                          }
                      }else if(!day.billable &amp;&amp; day.regHours != 'straight'){
                          // add base cost if not straight time
                          if(!day.billable){
                              totals.ft = day.costRate * day.regularHours;
                          }
                          // add per diem if applicable
                          if(!day.pdApproved){
                              totals.ft += day.pdAmount;
                          }
                      }else if(day.billable){
                          // labor charged to client
                          totals.ft = 0;
                          if(!day.pdApproved){
                              totals.ft += day.pdAmount;
                          }
                      }
                  break;
  
                  case 'b2cOT':
                      // if OT is billable to client and approved
                      if(day.otBillable &amp;&amp; day.otApproved){
                          totals.b2cOT = (day.costRate * day.timeAndAHalfHours * 1.5) + (day.costRate * day.doubleTimeHours * 2);
                      }else{
                          // all other cases don't bill client at all
                          totals.b2cOT = 0;
                      }
                  break;
  
                  case 'ftOT':
                      // if OT is not billable to client but approved
                      if(!day.otBillable &amp;&amp; day.otApproved){
                          totals.ftOT = (day.costRate * day.timeAndAHalfHours * 1.5) + (day.costRate * day.doubleTimeHours * 2);
                      }else{
                          totals.ftOT = 0;
                      }
                  break;
              }
  
              return totals;
          },
  
          getUserDays(e){
              // grab the days for this user and spit it to the table
              axios.get(this.userURI+e.target.value+'/days').then(response=&gt;{
                  this.userDays = response.data.days;
              });
  
              this.userID = e.target.value;
          },
          finalTotal($userID,$field){
              // set user ID to 0 if all are selected for lookup
              if($userID == 'all'){
                  $userID = 0;
              }
  
              let days = this.userDays;
  
              function sumFinder(id,field) {
                  return days.reduce((sum, e) =&gt; {
                      if(id == 0){
                          sum += e[field];
                          return sum;
                      }else{
                          e.userID == id ? (sum += e[field]) : (sum += 0);
                          return sum;
                      }
                  }, 0);
              }
  
              // Create our number formatter.
              var formatter = new Intl.NumberFormat('en-US', {
                  currency: 'USD',
              });
  
              return formatter.format(sumFinder($userID,$field));
          },
  }
  </code></pre>