我对所有值求和,但为啥它不适用于所有动态总计字段
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/…以上是关于我对所有值求和,但为啥它不适用于所有动态总计字段的主要内容,如果未能解决你的问题,请参考以下文章
汽车加油问题出现一些错误。它适用于大多数测试用例,但不适用于所有测试用例。你能告诉我为啥这段代码是错误的
Jquery .change() 函数不适用于动态填充的 SELECT 列表