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

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字段时，Total_Tax_BreakUp中的所有TicketInvoiceItems与第一个{{ 1}}的{​​{1}}字段...这可能会令人困惑，因此我添加了一个图像以更好地理解。谢谢。

这是我的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>

得到这个错误，当我加总所有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;
  }
}