Проблема с динамическими полями ввода

Я использую 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>

Проблема с динамическими полями ввода

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
127
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш код немного избыточен и имеет запутанную структуру данных. Вы зацикливаетесь и продвигаетесь к ticketInvoiceItems, но у вас также есть form.ticketInvoiceItems, который, похоже, имеет ту же структуру. Какой из них вы действительно хотите использовать?

Ваши атрибуты v-модели тоже не используются. Вы привязываетесь к одним и тем же свойствам формы на каждой итерации цикла.

Вам нужно будет использовать информацию в вашем цикле при вводе атрибута v-model, позволяя входам точно знать, к какому имени пассажира они должны быть привязаны:

Либо с помощью индекса (pos):

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

Или, поскольку ваш цикл v-for определяет ticketInvoiceItem:

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

Как ты сказал, я просто использую ticketInvoiceItems[pos].pessenger_name вместо form.passenger_name, теперь у меня не возникает этой проблемы. Я просто хочу спросить, все ли в порядке с моим <script>?

Partab Saifuddin Zakir 23.10.2018 00:45

Пожалуйста, проверьте, нужно ли еще что-нибудь исправить. @Devon

Partab Saifuddin Zakir 23.10.2018 00:58

Как я уже сказал выше, у вас определены повторяющиеся массивы ticketInvoiceItem. В остальном, если это решило вашу проблему, примите это как ответ.

Devon 23.10.2018 03:47

Не достал @Devon, где я его дублировал ??? мой код <script> в порядке или мне нужно внести некоторые изменения?

Partab Saifuddin Zakir 23.10.2018 10:26

Другие вопросы по теме