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

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

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

Answer 2

您似乎跳过了进入数组：

即。

this.form.ticketInvoiceItems[0].tax_SB

无论如何个人：

1. 我会将税收细目更改为 v-for
2. 相应地更改ticketInvoiceItems 以使上述操作生效

3. 这样您就不必重复自己，并且可以动态汇总任意数量的项目，例如使用

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

Answer 3

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

问题出在我的计算属性上。我所有的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;
  }
}