Change value after confirmation in input VUE-JS

Question

I have a table with an input column. This input column will have value if it has been saved in ddbb before. If this value changes, handled with an event '@blur', I show a modal to confirm the change. My problem is that if you want to keep the old value it will always change... I tried to change this value with javascript, but it doesn't work... Any suggestions?

This is my code:

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

score 0 · Answer 1 · answered Mar 19 '20 at 13:52

how is calculatePricingCustomDriver being loaded into your Vue component? For it to be called like that from @blur you would need to define it as a method:

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

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

Or it could be installed as a global mixin

Change value after confirmation in input VUE-JS

1 Answers1