Я суммирую все значения, но почему это не работает для всех динамических итоговых полей

Я использую Laravel 5.7 и VueJs 2.5.* ...

СУММИРУЯ: Когда я ввожу значения, я получаю сумму в поле «Итого», но когда я добавляю строку элементов динамически, она не работает для других строк элементов, она работает только для первой строки.

ОПИСАНИЕ: У меня есть несколько полей ввода 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>

Мой VueJs 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;

  }
},

Я суммирую все значения, но почему это не работает для всех динамических итоговых полей

Вам лучше отделить код внутри v-for от пользовательского компонента. Это легче.

ittus 26.10.2018 02:58

Я новичок в этом, поэтому я не понимал, что вы сказали, до тех пор, пока вы не поясняете легким способом, к тому же мой английский не так хорош ... Кстати, спасибо, брат.

Partab Saifuddin Zakir 26.10.2018 03:27
Поведение ключевого слова "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) для оценки ваших знаний,...
0
2
94
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

}

Спасибо, брат, за вашу поддержку, но я принял ответ, я думаю, что это самый простой вопрос .... не могли бы вы сделать мне одолжение? Можете ли вы помочь мне решить эту проблему? @VernonJianHao Stak: stackoverflow.com/questions/52998040/…

Partab Saifuddin Zakir 26.10.2018 06:01
Ответ принят как подходящий

Проблема в вашем вычисленном свойстве. Все ваши индексы находятся в 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;
        }
    }

Спасибо, брат ... Ты тоже можешь помочь мне с этим? @Shawn Стек: stackoverflow.com/questions/52998040/…

Partab Saifuddin Zakir 26.10.2018 06:17

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