I was having trouble syncing the input value from this child component with the v-model of the parent. This was the solution to make it work for me with Vue 2.0.

<input :type="type" :value="value" @input="$emit('input', $event.target.value)" />

I thought this issue had been closed, but cleave no longer works when using v-model. I'm using vue@^2.3.3 and vue-cleave@^1.2.0.

Here is the typical cleave component. When adding the v-model field, the cleave formatting no longer works and without the v-model field, it does.

<cleave v-model="date" placeholder="Delivery Date" :options="{ date: true, datePattern: [ 'm', 'd', 'Y'] }"></cleave>

After upgrade to version 1.2.0. The auto format from cleave.js stopped working if I add an v-model attribute.

Here's the code I use.

            <cleave
                   class="input"
                   v-model="code.forwardPhoneNumber"
                   placeholder="Enter phone number"
                   :options="{ blocks: [0, 3, 3, 4],
                   numericOnly: true,
                   delimiters: ['(', ') ', '-'] }">
            </cleave>

Tested on both firefox & chrome & safari in macOs. I think this should be a major issue.

Could we add a deep watch to the options object to rebuild if the options change?

For example, if I am using this for a phone number input that is dependent on their country setting, the option object may change.

Now you can do something like the following and it will work as expected:

<cleave placeholder="Enter your credit card number" :options="{ creditCard: true }" v-model="card"></cleave>

Sometimes the value of a field is initialised or calculated externally and thus filled in automatically, not by an input event. External changes of the value are now also passed to cleave to make sure they are masked properly.

#19

Hey, me again

This PR will allow you to pass event listeners through a prop object in the following format

{ 
  blur() {
    console.log('on blur')
  }
}

I think this is a lot cleaner than passing events through as separate props

Sometimes the value of a field is initialised or calculated externally and thus filled in automatically, not by an input event. External changes of the value are now also passed to cleave to make sure they are masked properly.

#19

I need to have a text input so that the user can type the company brazillian CNPJ number (14 digits) or a brazillian CPF (11 digits) with a dynamic mask according to the length of the text, as the example below:

CNPJ: 12.345.789/1011-12 CPF: 123.456.789-01

Is there are way to do this using vue-bulma/cleave ? If not, that'd be a really great feature to be implemented in the next release. Thanks a lot.

In our setup, we have some fields that are 'calculated' and thus are filled in automatically, not by an input event. We need masks on those fields as well. However, it seems like external changes of the value are not passed to cleave at the moment and thus are not masked properly.

1.0.1 exposed last days brings a lot of bug fix (https://github.com/nosir/cleave.js/pull/161 & https://github.com/nosir/cleave.js/pull/150 for me)

vue-cleave should update cleave.js dependency version (if compatible...)