wirecardBrasil / awesome-mask

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.
MIT License
165 stars 22 forks source link

Issue with v-model #22

Closed IvanBernatovic closed 7 years ago

IvanBernatovic commented 7 years ago

Hello,

we found a bug within a very reasonable and common use case. So, we are using same form for adding and editing our data. It works perfectly in "Add" form when all fields are empty. Issue occurs when you edit data (so you already have filled form with existing data).

Our instance has a lot of fields in data, and one of them is using your plugin. On input of that field we are using v-model="'money'" directive. So, when you first initialize "Edit" form everything is displayed correctly, including the field with v-mask. But when you change and of the form data field loses mask. I think the problem is when you initialize the plugin. So, if we provide input with v-mask with value 1500 we are expecting "15,00" value in our component data field and that seems to work at first. When some other data is changed that input changes to 1500 effectively losing the mask. This is not desired. I forked your examples repo and added name property to data with value "Ivan". I also created additional input after your price input with mask. You can clone the repo here.

I also recorded a video showing a bug. I think that issue is that component data is not properly changed upon plugin initialization. So in videos example you have a price data field with a value 20. I think that it should be converted to "0,20" immediately after the initialization but that doesn't happen. Our "fix" is to programmatically trigger a change event for our input which would force plugin to convert 20 to "0,20" and from that point it works fine.

caioincau commented 7 years ago

Thanks @IvanBernatovic , cloned your repo and I am working on a fix.

caioincau commented 7 years ago

Can you please try version 0.5.3? @IvanBernatovic

IvanBernatovic commented 7 years ago

@icaioincau I'm so sorry, I thought I left a comment. I checked it that same day when you commented and it seems that everything works as expected now. Thank you!