Question

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

IN简短内容：：当我输入值时，我会在“总计”字段中获得总和，但是当我动态添加项目行时，它不适用于其他项目行，而仅适用于第一行。

>

说明：我有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>

我的VueJ 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;

  }
},

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

}

Answer 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;
        }
    }

我对所有值求和，但是为什么它不适用于所有动态总字段

2 个答案: