Я использую Laravel 5.7
и VueJs 2.5.*
...
СУММИРУЯ: Когда я ввожу значения, я получаю сумму в поле «Итого», но когда я добавляю строку элементов динамически, она не работает для других строк элементов, она работает только для первой строки.
ОПИСАНИЕ: У меня есть несколько полей ввода Taxes_Breakup
, мне нужно их все просуммировать и отобразить в поле Total_Tax_BreakUp
. В моем TicketInvoiceItems
у меня есть поля Taxes_Breakup
и поле Total_Taxes_Breakup
, когда я ввожу все значения, я получаю сумму в Total_Taxes_Breakup
, но когда я добавляю поля TicketInvoiceItems
динамически, другие поля Total_Tax_BreakUp
в TicketInvoiceItems
такие же, как первое поле 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;
}
},
Я новичок в этом, поэтому я не понимал, что вы сказали, до тех пор, пока вы не поясняете легким способом, к тому же мой английский не так хорош ... Кстати, спасибо, брат.
<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: stackoverflow.com/questions/52998040/…
Проблема в вашем вычисленном свойстве. Все ваши индексы находятся в 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;
}
}
Спасибо, брат ... Ты тоже можешь помочь мне с этим? @Shawn Стек: stackoverflow.com/questions/52998040/…
Вам лучше отделить код внутри
v-for
от пользовательского компонента. Это легче.