我对所有值求和,但为啥它不适用于所有动态总计字段

Posted

技术标签:

【中文标题】我对所有值求和,但为啥它不适用于所有动态总计字段【英文标题】:I Sum All Values But Why It's Not Working For All Dynamic Total Fields我对所有值求和,但为什么它不适用于所有动态总计字段 【发布时间】:2019-03-30 16:16:48 【问题描述】:

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

简短:当我输入值时,我会在 Total 字段中得到总和,但是当我动态添加项目行时,它不适用于其他项目行,它只适用于第一行。 p>

说明:我有一些Taxes_Breakup 的输入字段,我需要将它们全部相加并显示在Total_Tax_BreakUp 字段中。在我的TicketInvoiceItems 中,我有Taxes_Breakup 字段和Total_Taxes_Breakup 字段,当我输入所有值时,我在Total_Taxes_Breakup 中得到总和,但是当我动态添加TicketInvoiceItems 字段时,@987654333 中的其他Total_Tax_BreakUp 字段@ 与第一个 Total_Tax_BreakUp 字段相同。下面是一张图片以便更好地理解。谢谢。

这是我的html 代码:

<tr v-for="(ticketInvoiceItem, key) in form.ticketInvoiceItems" :key="key">
  <!--Passenger Name-->
  <td>
    <input v-model="ticketInvoiceItem.passenger_name" size="40" type="text" name="passenger_name" class="table-control form-control" :class=" 'is-invalid': form.errors.has('passenger_name') ">
  </td>

  <!-------------------Taxes BreakUps------------------->
  <input v-model="ticketInvoiceItem.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="ticketInvoiceItem.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 OTHER TAXES------------------->


  <!-------------------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 data():

data() 
  return 
    editmode: true,
    ticketInvoices: ,
    form: new Form(
      id: "",
      vendor_id: "",
      ticket_invoice_no: "",
      ticket_invoice_date: "",
      ticket_invoice_grand_total: "",

      ticketInvoiceItems: [
        id: "",
        ticket_invoice_id: "",
        passenger_name: "",
        sector: "",
        tax_SB: 0,
        tax_SRP: 0,
        tax_YQ: 0,
        tax_RG: 0,
        total_tax_breakup: 0,
      ]
    )
  ;
,

我的computed: 代码:

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

    this.form.ticketInvoiceItems[0].total_tax_breakup = calTaxTotal;

    return calTaxTotal;

  
,

【问题讨论】:

您最好将v-for 中的代码与自定义组件分开。这更容易。 我是新手,所以我不明白你说的,除非你用简单的方式详细说明,否则我的英语也不是很好......顺便说一句谢谢兄弟。 【参考方案1】:
<tr v-for="(ticketInvoiceItem, key) in form.ticketInvoiceItems" :key="key">
  <!--Passenger Name-->
  <td>
    <input v-model="ticketInvoiceItem[key].passenger_name" size="40" type="text" name="passenger_name" class="table-control form-control" :class=" 'is-invalid': form.errors.has('passenger_name') " @change="totalTax(key)">
  </td>

  <!-------------------Taxes BreakUps------------------->
  <input v-model="ticketInvoiceItem[key].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') " @change="totalTax(key)">

  <input v-model="ticketInvoiceItem[key].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') "  @change="totalTax(key)">
  <!-------------------AND OTHER TAXES------------------->


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

对我来说,我将使用 @change 而不是 computed 把下面的代码放在methods

totalTax(key) 
    let calTaxTotal =
      parseInt(this.form.ticketInvoiceItems[key].tax_SB) +
      parseInt(this.form.ticketInvoiceItems[key].tax_SRP) +
      parseInt(this.form.ticketInvoiceItems[key].tax_YQ) +
      parseInt(this.form.ticketInvoiceItems[key].tax_RG);

    this.form.ticketInvoiceItems[key].total_tax_breakup = calTaxTotal;

    return calTaxTotal;


【讨论】:

感谢兄弟的支持,但我接受了上面的答案,我认为这很容易......你能帮我一个忙吗?你能帮我解决这个问题吗? @VernonJianHao Stak:***.com/questions/52998040/…【参考方案2】:

问题出在您的计算属性上。您的所有索引都位于 0 或表的第一行。如果你想加起来多于一行,你需要将索引传递到你的 totalTax 中。所以计算属性不是最好的选择。将其转换为方法并将索引(或键)传递给方法。

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

方法

      methods: 
        /**
         * The index parameter is the current row that you are working on  
         * @param index
         * @returns number
         */
        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;
        
    

【讨论】:

谢谢兄弟.....你能帮我解决这个问题吗? @肖恩堆栈:***.com/questions/52998040/…

以上是关于我对所有值求和,但为啥它不适用于所有动态总计字段的主要内容,如果未能解决你的问题,请参考以下文章

如何获得动态创建的行的总价格?

汽车加油问题出现一些错误。它适用于大多数测试用例,但不适用于所有测试用例。你能告诉我为啥这段代码是错误的

Oracle 中总计和小计使用的函数

Jquery .change() 函数不适用于动态填充的 SELECT 列表

jquery 焦点回到相同的输入字段,错误不适用于所有浏览器

如何在 Jaspersoft iReport Designer 中对列中的所有值求和?