Getting Total Sum Of All Values But Why It's Showing Same Total In All Dynamic Items

Question

I'm using Laravel 5.7 & VueJs 2.5.* ...

I have 12 input fields of Taxes_Break_Up, i need to sum all of them and show in Total_Tax_BreakUp field. I have TicketInvoice and a TicketInvoice has many TicketInvoiceItems, in my TicketInvoiceItems i have Taxes_Breakup fields and a Total_Taxes_Breakup field, i put values in Taxes_Breakup and get the sum in Total_Taxes_Breakup, but when i add TicketInvoiceItems fields dynamically, all the Total_Tax_BreakUp in TicketInvoiceItems is as same as the the first TicketInvoiceItems's Total_Tax_BreakUp field... This might be confusing so i add an image for better understanding. Thank You.

Here is my HTML code:

<tr v-for="(ticketInvoiceItem, pos) in form.ticketInvoiceItems" :key="pos">
  <!--Passenger Name-->
  <td>
    <input v-model="form.ticketInvoiceItems[pos].passenger_name" size="40" type="text" name="passenger_name" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('passenger_name') }">
    <has-error :form="form" field="passenger_name"></has-error>
  </td>

  <!-------------------Taxes BreakUps------------------->
  <input v-model="form.ticketInvoiceItems[pos].tax_SB" id="tax_SB" type="number" name="tax_SB" placeholder="SB" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SB') }">

  <input v-model="form.ticketInvoiceItems[pos].tax_SRP" id="tax_SRP" type="number" name="tax_SRP" placeholder="SRP" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SRP') }">
  <!-------------------AND 10 OTHER------------------->


  <!-------------------Total Taxes Break Up------------------->
  <td>
    <input :value="totalTax" id="total_tax_breakup" type="number" size="10" name="total_tax_breakup" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('total_tax_breakup') }">
  </td>
</tr>

Here is my VueJs Code:

<script>
  export default {
    data() {
      return {
        ticketInvoices: {},
        form: new Form({
          id: "",
          vendor_id: "",
          ticket_invoice_no: "",
          ticket_invoice_date: "",
          ticket_invoice_fares_total: "",
          ticket_invoice_taxes_grand_total: "",
          ticket_invoice_grand_total: "",

          ticketInvoiceItems: [{
            id: "",
            ticket_invoice_id: "",
            passenger_name: "",
            tax_SB: 0,
            tax_SRP: 0,
            tax_YQ: 0,
            tax_RG: 0,
            tax_PK: 0,
            tax_YR: 0,
            tax_SF: 0,
            tax_PTT: 0,
            tax_OAS: 0,
            tax_PSF: 0,
            tax_PB: 0,
            tax_OAD: 0,
            fares: "",
            total_tax_breakup: 0,
            sub_total: ""
          }]
        })
      };
    },
    computed: {
      totalTax() {
        let calTaxTotal =
          parseInt(this.form.ticketInvoiceItems[0].tax_SB) +
          parseInt(this.form.ticketInvoiceItems[0].tax_SRP) +
          parseInt(this.form.ticketInvoiceItems[0].tax_YQ) +
          parseInt(this.form.ticketInvoiceItems[0].tax_RG) +
          parseInt(this.form.ticketInvoiceItems[0].tax_PK) +
          parseInt(this.form.ticketInvoiceItems[0].tax_YR) +
          parseInt(this.form.ticketInvoiceItems[0].tax_SF) +
          parseInt(this.form.ticketInvoiceItems[0].tax_PTT) +
          parseInt(this.form.ticketInvoiceItems[0].tax_OAS) +
          parseInt(this.form.ticketInvoiceItems[0].tax_PSF) +
          parseInt(this.form.ticketInvoiceItems[0].tax_PB) +
          parseInt(this.form.ticketInvoiceItems[0].tax_OAD);

        this.form.ticketInvoiceItems[0].total_tax_breakup = calTaxTotal;

        return calTaxTotal;

      }
    },
  } 
  </script>

Getting This Error, when i sum all Taxes_Breakup,and when i add dynamic fields, all Total_taxes_breakup are copying the first one.

score 1 · Answer 1 · answered Oct 24 '18 at 21:29

1

I just did this parseInt(this.form.ticketInvoiceItems[0].tax_SB) and now i'm getting the sum of all tax_breakup, i think this shuold be right

answered Oct 24 '18 at 21:29

Partab Saifuddin Zakir

371
1
6
16

score 0 · Answer 2 · answered Oct 24 '18 at 20:33

0

It seems you skipped going inside the array:

ie.

this.form.ticketInvoiceItems[0].tax_SB

Anyway personally:

I'd change the tax breakdowns to be a v-for
Change accordingly ticketInvoiceItems in order for the above to work
This way you won't have to repeat yourself and you can sum up dynamically as many items as you want such as with

const totalTax = [...singleTax].reduce((a, b) => a + b, 0)

answered Oct 24 '18 at 20:33

Mel Macaluso

3,250
2
12
26

i try this: `this.form.ticketInvoiceItems[0].tax_SB` in all my tax_breakup but in my `total_tax_breakup` it show my like "1010101010" if i enter "10" five time, like its concatinate all value and show me the result instead of show me the sum. @MelMacaluso – Partab Saifuddin Zakir Oct 24 '18 at 20:46
1

As you know + concatenates strings but if you sum a string which is a number it will interpret it as integer anyway and give you the sum. So that's not the issue... Any chance of spinning up a quick codepen so we have a look at some trimmed down version of the code? – Mel Macaluso Oct 24 '18 at 21:00
Brother i dont know how to use codepen but i just did this: https://codepen.io/PartabSaifZakir/pen/OBaZXx @MelMacaluso – Partab Saifuddin Zakir Oct 24 '18 at 21:21
1

https://codepen.io/Venomzzz/pen/bmQKdZ?editors=1011 Slightly amended for convenience, make sure to identify that [pos] array as might be the cause... I also stripped the Form class as there was no reference to that in your snippets. – Mel Macaluso Oct 24 '18 at 21:53
i did just like that but their is a problem when i put values in `taxes_breakup` i get the total in `total_taxes_breakup`, but when i add fields dynamically, all the other field's `total_taxes_breakup` are same as the first field.. I updated the image in my Question you can see that. @MelMacaluso – Partab Saifuddin Zakir Oct 24 '18 at 22:05
one more thing in my `v-model` i use the index of `[pos]` like this: ` – Partab Saifuddin Zakir Oct 24 '18 at 22:19
That's what I was mentioning, I don't really know how that pos array key is generated and the relationship between that and the rest of the code unfortunately – Mel Macaluso Oct 24 '18 at 22:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/182449/discussion-between-saif-zakir-and-mel-macaluso). – Partab Saifuddin Zakir Oct 24 '18 at 22:30

score 0 · Accepted Answer · answered Oct 26 '18 at 13:51

I solved my issue Thank You so much for ur support,

The problem is in my computed property. All of my indexes are at [0], or the first row of my table. If i want to add up more than one row i need to pass the [index] into my totalTax. So a computed property is not the best choice. So i turn it into a method instead and pass the index (or key) into the method.

<input :value="getTotalTaxes(key)"
                       id="total_tax_breakup"
                       type="number" size="10"
                       name="total_tax_breakup"
                       class="table-control form-control">

Method:

methods: {
  getTotalTaxes(index) {
    let calTaxTotal =
      parseInt(this.form.ticketInvoiceItems[index].tax_SB) +
      parseInt(this.form.ticketInvoiceItems[index].tax_SRP) +
      parseInt(this.form.ticketInvoiceItems[index].tax_YQ) +
      parseInt(this.form.ticketInvoiceItems[index].tax_RG);

    this.form.ticketInvoiceItems[index].total_tax_breakup = calTaxTotal;

    return calTaxTotal;
  }
}

@MelMacaluso Look at this – Partab Saifuddin Zakir Oct 26 '18 at 13:52 — Partab Saifuddin Zakir, Oct 26 '18 at 13:52

Getting Total Sum Of All Values But Why It's Showing Same Total In All Dynamic Items

3 Answers3