Value not updating when changing amount from another input

[emilioeduardob]

Hi!

If I have two inputs using the same property, the one with vue-numeric is not updated.
For example

<input type="text" v-model="invoice.total">
<vue-numeric v-model="invoice.total"></vue-numeric>

Total is: {{invoice.total}}

The value entered in the regular input tag is only updated in the html but not on the vue-numeric. Checking with dev tools, I see that amount is 0 and value is changing inside the VueNumeric component

Any Ideas?

[kevinongko]

Hi @emilioeduardob,

I fixed the component issue not reflecting change from other input element with same v-model in v1.5.2.

However beware input value from other source could result in String type, remember to use v-model.number modifier in your other source.

[emilioeduardob]

Hey @kevinongko, I also tried using v-model.number but the value only shows if I click on the vue-numeric component. I managed to make it work in my local project adding to the project's copy of vue-numeric:

  watch: {
    value: function(newVal) {
      this.formatValue();
    }
  },

[eduarguz]

i think there is no need to mounted() method and all that behavior should be done in the watch()

something like that

watch: {
    /**
     * Watch for value change from other input.
     * @param {Number} val
     * @param {Number} oldVal
     */
    numberValue (val, oldVal) {
      if (this.amountValue !== val && this.amountValue === oldVal) {
          this.processValue(this.formatToNumber(this.value))
          this.formatValue(this.value)
      }
    }
  },

I wold like to discuss that before using the component

[kevinongko]

Hi @emilioeduardob ,

using v-model.number is only to make sure your v-model value is Number type, because changing the v-model value from source other than vue-numeric could result in String.

IMO the value should not be formatted to currency when editing the element, doing so could result in weird behavior when inputting decimals.

[emilioeduardob]

Agree @kevinongko. Editing the element should be without format.
But how can the component listen to changes done from other sources. May be tracking the focus state to know if the value should be updated with format or not 🤔

[kevinongko]

Hi @eduarguzher,

I tried your solution, however there are weird behaviors when inputting , as decimals both from normal element and the component.

---

@emilioeduardob I also had a hard time figuring how to track other element other than the component itself, the best I can do for now is to show the changes even though it's not formatted.

any PR is welcome :D

[emilioeduardob]

thanks for the update @kevinongko , I'll give it a shot and see if I can send a PR