Получение общей суммы всех значений, но почему она показывает одинаковую сумму во всех динамических элементах

Question

Я использую Laravel 5.7 & VueJs 2.5.* ...

У меня 12 полей ввода Taxes_Break_Up, мне нужно сложить их все и показать в поле Total_Tax_BreakUp.У меня есть TicketInvoice, а у TicketInvoice много TicketInvoiceItems, в моих TicketInvoiceItems полях Taxes_Breakup и поле Total_Taxes_Breakup, я помещаю значения в Taxes_Breakup и получаю сумму в Total_Taxes_Breakup,но когда я добавляю TicketInvoiceItems поля динамически, все Total_Tax_BreakUp в TicketInvoiceItems совпадают с первым TicketInvoiceItems 'Total_Tax_BreakUp полем ... Это может сбивать с толку, поэтому я добавляю изображение для лучшего понимания,Спасибо.

Вот мой HTML код:

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

Вот мой VueJs Код:

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

Получение этой ошибки при суммированиивсе Taxes_Breakup, и когда я добавляю динамические поля, все Total_taxes_breakup копируют первое.

Answer 1

Я только что сделал это parseInt(this.form.ticketInvoiceItems[0].tax_SB), и теперь я получаю сумму всех tax_breakup, я думаю, что это будет правильно

Answer 2

Я решил свою проблему. Большое спасибо за вашу поддержку,

Проблема в моем вычисленном свойстве.Все мои indexes находятся на [0], или в первом ряду моей таблицы.Если я хочу добавить более одной строки, мне нужно передать [index] в мой totalTax.Таким образом, вычисляемое свойство не лучший выбор.Поэтому вместо этого я превращаю его в метод и передаю index (or key) в метод.

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

Метод:

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

Answer 3

Кажется, вы пропустили переход внутрь массива:

т.е.

this.form.ticketInvoiceItems[0].tax_SB

В любом случае лично:

1. Я бы изменил разбивку налогов на v-for
2. Измените соответствующим образом ticketInvoiceItems, чтобы вышеперечисленное сработало

3. Таким образом, вам не нужно будет повторяться, и вы можете динамически суммировать столько элементов, сколько захотите, например, с помощью

   const totalTax = [... singleTax].уменьшить ((a, b) => a + b, 0)