javascript - 动态输入字段问题

Question

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

首先我面临这个问题：添加动态输入字段

我想建立一个发票应用程序，所以一张发票有很多 InvoiceItems。

当我能够为项目添加或删除动态输入字段时，我遇到了另一个问题。当我为项目添加多个输入字段并尝试为 InvoiceItems 填充数据时，所有其他输入字段都会自动填充我输入的相同数据。

我有两张表，一张用于发票，另一张用于发票项目。

这是我的<script>代码：

<script>
  export default {
    data() {
      return {
        ticketInvoices: {},
        ticketInvoiceItems: [],

        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: "",
            ticket_no: "",
            flight_no: "",
            departure_date: "",
            sector: "",
            fares: "",
            tax_SB: "",
            tax_SRP: "",
            tax_PB: "",
            tax_OAD: "",
            total_tax_breakup: "",
            sub_total: ""
          }]

        })
      };
    },
    methods: {
      addItems() {
        this.ticketInvoiceItems.push({
          id: "",
          passenger_name: "",
          ticket_no: "",
          flight_no: "",
          departure_date: "",
          sector: "",
          fares: "",
          tax_SB: "",
          tax_SRP: "",
          tax_PB: "",
          tax_OAD: "",
          total_tax_breakup: "",
          sub_total: ""
        });
      },
      removeItems(pos) {
        this.ticketInvoiceItems.splice(pos, 1);
      },

      <script>

这是我的HTML代码：

<tbody>
  <tr v-for="(ticketInvoiceItem, pos) in ticketInvoiceItems" :key="pos">

    <!--Passenger Name-->
    <td>
      <input v-model="form.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>

    <!--Ticket No.-->
    <td>
      <input v-model="form.ticket_no" size="24" type="text" name="ticket_no" class="table-control form-
      control" :class="{ 'is-invalid': form.errors.has('ticket_no') }">
      <has-error :form="form" field="ticket_no"></has-error>
    </td>

    <!--Flight No.-->
    <td>
      <input v-model="form.flight_no" size="7" type="text" name="flight_no" class="table-control form-
      control" :class="{ 'is-invalid': form.errors.has('flight_no') }">
      <has-error :form="form" field="flight_no"></has-error>
    </td>

    <!--Departure Date-->
    <td>
      <input v-model="form.departure_date" type="date" name="departure_date" class="table-control form-
      control" :class="{ 'is-invalid': form.errors.has('departure_date') }">
      <has-error :form="form" field="departure_date"></has-error>
    </td>

    <!--Sector-->
    <td>
      <input v-model="form.sector" type="text" name="sector" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('sector') }">
      <has-error :form="form" field="sector"></has-error>
    </td>

    <!--DROPDOWN MENU-->
    <td>
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        </button>
        <div class="dropdown-menu form-group" aria-labelledby="dropdownMenuButton">
          <form class="px-1 py-1">

            <!--Taxes BreakUp-->
            <input v-model="form.tax_SB" type="number" name="tax_SB" placeholder="SB" class="table-
            control form-control" :class="{ 'is-invalid': form.errors.has('tax_SB') }">
            <has-error :form="form" field="tax_SB"></has-error>

            <input v-model="form.tax_SRP" type="number" name="tax_SRP" placeholder="SRP" class="table-
            control form-control" :class="{ 'is-invalid': form.errors.has('tax_SRP') }">
            <has-error :form="form" field="tax_SRP"></has-error>

            <input v-model="form.tax_PB" type="number" name="tax_PB" placeholder="PB" class="table-
            control form-control" :class="{ 'is-invalid': form.errors.has('tax_PB') }">
            <has-error :form="form" field="tax_PB"></has-error>

            <input v-model="form.tax_OAD" type="number" name="tax_OAD" placeholder="OAD" class="table-
            control form-control" :class="{ 'is-invalid': form.errors.has('tax_OAD') }">
            <has-error :form="form" field="tax_OAD"></has-error>
          </form>
        </div>
      </div>
    </td>

    <td>
      <!--Total Taxes Break Up-->
      <input v-model="form.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') 
      }">
      <has-error :form="form" field="total_tax_breakup"></has-error>
    </td>
    <!--Fares-->
    <td>
      <input v-model="form.fares" type="number" size="10" name="fares" class="table-control form-
      control" :class="{ 'is-invalid': form.errors.has('fares') }">
      <has-error :form="form" field="fares"></has-error>
    </td>
    <!--Sub Total -->
    <td>
      <input v-model="form.sub_total" type="number" size="10" name="sub_total" class="table-control 
      form-control" :class="{ 'is-invalid': form.errors.has('sub_total') }">
      <has-error :form="form" field="sub_total"></has-error>
    </td>
    <!--Remove Button-->
    <td>
      <button v-on:click="removeItems(pos);" class="btn btn-default form-control" style="background-
      color: transparent;"><i class="fas fa-times-circle text-fade-red"></i></button>

    </td>
  </tr>
  <!--Add Button-->
  <button @click="addItems" class="btn btn-default" style="background-color: transparent;"><i 
  class="fas fa-check-circle text-green"></i></button>
</tbody>

标签： javascripthtmllaraveldynamicvuejs2

Answer 1

您的代码有点多余，并且具有令人困惑的数据结构。您正在循环并推送到ticketInvoiceItems，但您也有一个form.ticketInvoiceItems似乎是相同结构的。你真正想使用哪一个？

您的 v-model 属性也没有使用。您在循环的每次迭代中都绑定到相同的表单属性。

输入 v-model 属性时，您需要使用循环中的信息，让输入确切地知道它们应该绑定到哪个乘客姓名：

使用索引（pos）：

<input v-model="ticketInvoiceItems[pos].passenger_name" />

或者，由于您的 v-for 循环定义了 ticketInvoiceItem：

<input v-model="ticketInvoiceItem.passenger_name" />