watch and computed sometimes not detecting

[lexar19]

I used 2.9.0 for Vue 2, when input sometimes watch and computed not detecting. Sometimes it needs to unfocus or click outside the inputs to detect it and reflect changes.

[lexar19]

For the meantime I revert back to version 2.2.12, coz 2.5 - 2.9.0 have the same issue. Hope you able to fix this, thank you.

[dipaksarkar]

Please use latest version v2.13.0 for Vue 2

[lexar19]

Issue still occur in v2.13.0

[dipaksarkar]

Can you tell me how to i can replicate the issue?

[lexar19]

Example I have this input , when inputting the watch and computed sometimes not reflecting or do what suppose to do.

<input v-model="price" v-number="number">
<script>
watch: {
 price(){
   .. do something
 }
},
computed: {
  calculate(){
    return this.price * 10;
   }
},
</script>

[lexar19]

In v2.2.12 its working fine, its just disable negative not fix in this version.

[dipaksarkar]

You are doing wrong that's why it's happen. You will need to use component to get unmasked value. <number> component has been renamed to <vue-number>

Example: https://codesandbox.io/s/vue-2-playground-forked-m6mp17?file=/src/App.vue

<template>
  <div class="component">
    <vue-number v-bind="config" v-model="price" />
    <div>price: {{ price }}</div>
    <div>calculated: {{ calculated }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 123456.86,
      config: {
        min: 0,
      }
    }
  },
  watch: {
    price (val) {
      console.log('watch:price', val);
    },
  },
  computed: {
    calculated () {
      return this.price * 10
    }
  }
}
</script>

[lexar19]

Its not about the unmasked value, theres a reason as to why I use it as directive and I already handled the comma and any error when calculating, so the issue is not in my side.

[lexar19]

Even here https://codesandbox.io/s/vue-2-playground-forked-m6mp17?file=/src/App.vue, the issue also occur, pls compare the 2 images. The correct result is the 2nd image.

[lexar19]

I think the issue is when deleting or using backspace.

[dipaksarkar]

I have fix the issue.
https://codesandbox.io/s/coders-tm-vue-number-format-2-m6mp17?file=/src/components/DirectiveBased.vue

[lexar19]

I still capture some issue pls see screenshot below. I found another issue in which sometimes the input reverted back. For example, I input 10,000 then 100,000 sometimes it reverts back to 10,000 or vice versa.

[dipaksarkar]

Please check now, I have published new version 2.18.0 for vue 2
https://codesandbox.io/s/coders-tm-vue-number-format-2-m6mp17?file=/src/components/DirectiveBased.vue

[lexar19]

All fix now, thank you :)