Reflect value change based on other input #8

Author: kevinongko

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-numeric",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Input field component to display currency value based on Vue.",
   "author": "Kevin Ongko",
   "main": "src/vue-numeric.vue",

src/vue-numeric.vue

@@ -2,9 +2,9 @@
   <input
     :placeholder="placeholder"
     :value="value"
-    @blur="formatValue(amountValue)"
+    @blur="formatValue"
     @input="processValue(amountValue)"
-    @focus="convertToNumber"
+    @focus="convertToNumber(numberValue)"
     ref="numeric"
     type="tel"
     v-model="amount"
@@ -102,6 +102,14 @@ export default {
       return this.formatToNumber(this.amount)
     },
 
+    /**
+     * Number type from value props.
+     * @return {Number}
+     */
+    numberValue () {
+      return this.formatToNumber(this.value)
+    },
+
     /**
      * Number formatted minimum value.
      * @return {Number}
@@ -204,7 +212,7 @@ export default {
      * Format value using symbol and separator.
      */
     formatValue () {
-      this.amount = accounting.formatMoney(this.value, {
+      this.amount = accounting.formatMoney(this.numberValue, {
         symbol: this.currency + ' ',
         precision: Number(this.precision),
         decimal: this.decimalSeparator,
@@ -221,10 +229,11 @@ export default {
     },
 
     /**
-     * Remove symbol and separator on focus.
+     * Remove symbol and separator.
+     * @param {Number} value
      */
-    convertToNumber () {
-      this.amount = accounting.formatMoney(this.value, {
+    convertToNumber (value) {
+      this.amount = accounting.formatMoney(value, {
         symbol: '',
         precision: Number(this.precision),
         decimal: this.decimalSeparator,
@@ -233,6 +242,19 @@ export default {
     }
   },
 
+  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.convertToNumber(val)
+      }
+    }
+  },
+
   mounted () {
     // Check default value from parent v-model.
     if (this.value) {