Persistent value after clearing values

[richbowen]

When clearing the values of inputs, the cleave components retain the initial value in a variable called initValue.

This shows the value retained by the component on the left where the normal input dialog on the right, after being cleared is empty:

[alevans4]

@rgb-one you could submit a pull request with the fix we came up with.

[richbowen]

Cool :); gonna go over the code some more so I can understand it better. Thanks @alevans4

[heribertusk]

sorry for bumping this issues, is this problem already solved? because I still can't clear values on input programmaticaly.

[richbowen]

Haven't submitted a pull request.
Add this to the watch section of the component:

watch: {
    // ...
    value(val) {
      this.cleave.setRawValue(val)
    }
  }

[KyleXie]

@rgb-one your solution works, how about send a PR for this? Thanks.

[heribertusk]

@rgb-one : your solution works, but i'm using non-standar format for thousand separator. So I change it a bit:

watch: {
    // ...
    value(val) {
     this.cleave.setRawValue(val.replace(/\D/g,''))
    }
  }

Basically I remove all char and only keep number on string. Is this way correct too?

[richbowen]

That seems like it would work, but I think adding such functionality would be better done using "Custom Options" provided by the Cleave package: Here's an example: https://jsfiddle.net/rgb1/LfLbvgrL/4/.

[ezerw]

I have it working with:

<cleave class="form-control" v-model="phone" ref="phone" :options="{...}">
...
clear(){
     this.$refs.phone.cleave.setRawValue(null);
}