获取所有值的总和，但为什么它在所有动态项目中显示相同的总和

Question

我正在使用 Laravel 5.7 & VueJs 2.5.* ...

我有 Taxes_Break_Up 的 12 个输入字段，我需要将它们全部相加并显示在 Total_Tax_BreakUp 字段中。我有 TicketInvoice 和一个 TicketInvoice 有很多 TicketInvoiceItems，在我的 TicketInvoiceItems 我有 Taxes_Breakup 字段和一个 Total_Taxes_Breakup 字段，我把值放在Taxes_Breakup 并在 Total_Taxes_Breakup 中求和，但是当我动态添加 TicketInvoiceItems 字段时，TicketInvoiceItems 中的所有 Total_Tax_BreakUp 与第一个 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

您似乎跳过了进入数组的步骤：

即。

this.form.ticketInvoiceItems[0].tax_SB

无论如何个人：

我会将税收明细更改为 v-for
相应地更改 ticketInvoiceItems 以使上述工作正常
这样您就不必重复自己，并且可以根据需要动态汇总任意数量的项目，例如

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

Answer 2

我刚刚做了这个parseInt(this.form.ticketInvoiceItems[0].tax_SB)，现在我得到了所有的总和tax_breakup，我认为这应该是正确的

Answer 3

我解决了我的问题，非常感谢您的支持，

问题出在我的计算属性中。我所有的 indexes 都在 [0] 或我的 table 的第一行。如果我想加起来不止一行，我需要将 [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;
  }
}

获取所有值的总和，但为什么它在所有动态项目中显示相同的总和

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

html

javascript

laravel

vuejs2

laravel-5.7