-1

我正在使用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 都在复制第一个。 在此处输入图像描述

4

3 回答 3

1

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

于 2018-10-24T21:29:37.147 回答
0

您似乎跳过了进入数组：

IE。

this.form.ticketInvoiceItems[0].tax_SB

无论如何个人：

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

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

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

于 2018-10-24T20:33:36.550 回答
0

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

问题出在我的计算属性中。我所有的人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;
  }
}
于 2018-10-26T13:51:45.760 回答