vue-bulma / cleave

Vue Cleave component is based on cleave.js for Vue
MIT License
105 stars 17 forks source link

Having problem using v-model with this componement #8

Closed gongdao123 closed 7 years ago

gongdao123 commented 7 years ago

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.

gongdao123 commented 7 years ago

I've tried to debug it by place some breakpoint at cleave.js.

Appreantly cleave.js did it's part, as updateValueState function within cleave.js (line: 266) did formated the inputed value successfully.

But, seems value got changed back to unformatted inital input by vue somehow.

I'm using Vue 2.2.6 BTW.

gongdao123 commented 7 years ago

The problem is caused by call stack.

Cleave.js fire first so vue will overwrite the auto formated input.

9

luventa commented 7 years ago

Thanks for reporting and fixing this issue. I will merge your PR and try to rebase with $nextTick