Dynamic Input Fields Issue

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>

Devon Bessemer · Accepted Answer · 2018-10-22T21:36:48.190

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

edited Oct 22 '18 at 21:36

answered Oct 22 '18 at 21:31

Devon Bessemer

34,461
9
69
95

I did like u said, i just use `ticketInvoiceItems[pos].pessenger_name` instead of `form.passenger_name`, now I'm not getting this issue. I just want to ask that, is that everything Okay in my ` – Partab Saifuddin Zakir Oct 22 '18 at 22:45
Please check if anything else need to be corrected . @Devon – Partab Saifuddin Zakir Oct 22 '18 at 22:58
Like i said above, you have duplicate ticketInvoiceItem arrays defined. Other than that, if this solved your problem, please accept it as the answer. – Devon Bessemer Oct 23 '18 at 01:47
I didn't get it @Devon , where did i dublicate it ??? is my ` – Partab Saifuddin Zakir Oct 23 '18 at 08:26

Dynamic Input Fields Issue

1 Answers1