Измените значение после подтверждения ввода VUE - JS - PullRequest
Новая
       52

Измените значение после подтверждения ввода VUE - JS

0 голосов
/ 19 марта 2020

У меня есть таблица с входным столбцом. Этот входной столбец будет иметь значение, если он был сохранен в ddbb ранее. Если это значение изменяется, обрабатывается событие «@blur», я показываю модальное, чтобы подтвердить изменение. Моя проблема в том, что если вы хотите сохранить старое значение, оно всегда изменится ... Я пытался изменить это значение с помощью javascript, но оно не работает ... Есть предложения?

Это мой код: 

<b-tbody>
  <b-tr
    v-for="(driver, index) in drivers"
    :key="driver.clientId">
    <b-td
      data-label="Client"
      :title="driver.clientName">{{ driver.clientName }}</b-td>
    <b-td data-label="Numerator">
      <b-input
        :id="'numeratorDriver_'+index"
        class="driver-numerator text-right"
        type="text"
        :value="(driver.driverNumerator === undefined) ? 0 : $utils.formatNumber(driver.driverNumerator)"
        @blur="calculatePricingDriver($event, index)" /></b-td>
    <b-td
      class="text-right"
      data-label="Pricing"
      :title="driver.pricingDriver"><span>{{ driver.pricingDriver }}</span></b-td>
  </b-tr>
</b-tbody>

<script>
function calculatePricingCustomDriver (event, index) {
  let lastValue = this.drivers[index].driverNumerator
  if (this.$store.getters.price !== undefined) {
    let title = 'Modify numerator'
    let message = 'If you modify numerator driver, the calculated pricing will be deleted'
    this.$bvModal.msgBoxConfirm(message, {
      title: title,
      size: 'sm',
      buttonSize: 'sm',
      okTitle: 'Yes',
      okVariant: 'primary',
      cancelTitle: 'No',
      cancelVariant: 'primary',
      hideHeaderClose: false,
      centered: true
    })
      .then(confirmed => {
        if (confirmed) {
          this.$http.get('delete-price', { params: { id: this.$store.getters.id } })
            .then((response) => {
              if (response.status === this.$constants.RESPONSE_STATUS_OK) {
                this.price = ''
                let newNumerator = event.target.value
                this.drivers[index].driverNumerator = Number(newNumerator)
                let sumTotal = _.sumBy(this.drivers, 'driverNumerator')
                for (let i = 0; i < this.drivers.length; i++) {
                  this.drivers[i].pricingDriver = (this.drivers[i].driverNumerator / sumTotal).toFixed(2)
                }
              } else {
                this.drivers[index].driverNumerator = lastValue
                // this is that I want change because it doesn't work fine
                document.getElementById('numeratorDriver_' + index).value = lastValue
              }
            })
        } else {
          this.drivers[index].driverNumerator = lastValue
          document.getElementById('numeratorDriver_' + index).value = lastValue
        }
      })
      .catch(() => {
      /* Reset the value in case of an error */
        this.$utils.showModalError()
      })
  } else {
    let newNumerator = event.target.value
    this.drivers[index].driverNumerator = Number(newNumerator)
    let sumTotal = _.sumBy(this.drivers, 'driverNumerator')
    for (let i = 0; i < this.drivers.length; i++) {
      this.drivers[i].pricingDriver = (this.drivers[i].driverNumerator / sumTotal).toFixed(2)
    }
  }
}
</script>

1 Ответ

0 голосов
/ 19 марта 2020

как calculatePricingCustomDriver загружается в ваш Vue компонент? Чтобы он вызывался так из @blur, вам нужно определить его как метод: 

<template>
  <!-- your table-->
</template>

<script>
export default {
  name: "MyComponent",
  methods : {
    calculatePricingCustomDriver () {
      // your code
    }
  }
}
</script>

Или он может быть установлен как глобальный миксин

...