动态输入字段问题

Question

I'm using Laravel 5.7 & VueJs 2.5.* ...

First I'm facing this issue: Adding Dynamic Input Fields

I'm want to build an invoice application, so a invoice has many InvoiceItems.

When I'm able to add or remove Dynamic input fields for items, then I getting another issue. When I add more than one input fields for items and try to fill data for InvoiceItems all other input fields fill automatically with the same data I typed.

I have two table one for Invoice and other for Invoice Items.

Here is my <script> code:

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

Here is my HTML code:

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

Answer 1

Your code is a bit redundant and has a confusing data structure. You are looping and pushing to ticketInvoiceItems , but you also have a form.ticketInvoiceItems which seems to be the same structure. Which one do you actually want to use?

Your v-model attributes aren't using either. You're binding to the same form properties in every iteration of the loop.

You would need to make use of the information in your loop when entering a v-model attribute, letting the inputs know exactly which passenger name they should be bound to:

Either using the index (pos):

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

Or, since your v-for loop defines ticketInvoiceItem:

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