The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.

Looking for dynamic brazilian phone like http://codepen.io/lagden/pen/meemqG as mentioned at https://github.com/BankFacil/vanilla-masker

How can I configure this with VueJS directive?

Hello,

i was trying to download the package with "npm i --save awesome-mask" but the download crash after a few seconds.

May be this is a npm issue ?

Hello,

I'm facing an issue, that occurs when I retrieve a BigDecimal from my Oracle database, I have a value of 120.1 and when it's loaded to the input masked with money it loads 12,01 not considering the decimal separator. Is there any configuration that makes an autocomplete to work arround this case?

it shoed this errror -

Failed to resolve directive: mask 
(found in anonymous component - use the "name" option for better debugging messages.)

I instaled with npm , do I have to import ?

In a form, with two options: Pessoa Juridica | Pessoa fisica

<input type="text" v-mask="cpfCnpjMask" v-model.lazy="plan.cpfCnpj" and more stuff for cnpj...>
<input type="text" v-mask="cpfCnpjMask" v-model.lazy="plan.cpfCnpj" and more stuff for cpf...>
computed:{
            cpfCnpjMask(){
                return this.isLegalPerson ? '99.999.999/9999-99' : '999.999.999-99';
            }
        },

the default mask will be '999.999.999-99'. when i change to Pessoa Juridica, the mask will update to '99.999.999/9999-99'. but on next change on value, the mask change again to '999.999.999-99'.

Here is a gif, should be better to understand

Is my mistake or really a unexpected behavior?

Thanks guys!

I am having problems when the user paste the value of the field(ctrl + v). The field fullfil the mask correctly, but the element in the data property in vuejs stays without the mask. Have you been through this?

Code:

import AwesomeMask from 'awesome-mask'

Vue.directive('mask', AwesomeMask);

new Vue ({
    el: '#inicialEmail',
    data: {
        action: '',
        requestType: '',
        inscricao: {
            nomcan: '',
            emailcan: '',
            celcan: ''
        }
    })

Example:

Copy paste:

Write:

First of all, congratulations for the initiative. Excellent job.

How do I get the value to be formatted in an assignment to the v-model variable?

The mask works in the course of typing only. Is there a way to apply the mask to the default value of an input?

Thank you very much for your time.

On every place I use v-mask, every change that i have on the text throws an 'Event is not a constructor' error.

It works normally and the way expected, but keeps throwing this error. Anyone knows what could be?

Solves issue #25.

Simple solution: the used element was the component's root, instead of the input itself.

The proper input was used to attach the events, but not for everything else. Solved by just sending the input element to everywhere the root element was being passed onto.

Is it possible to use together with component inputs, such as Vuetify's Text fields?

I've tried and it throws a "Cannot read property 'length' of undefined" error.

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.

Fix for #39.

Introduces ability to pass through options to vanilla-masker. Backwards compatible, so using awesome-mask the way you have works fine, just lets you pass an object instead with value for the mask and passing other options straight through.

There are a variety of configuration options available to both the toMoney and the toPattern methods in vanilla-masker that would be useful to expose. I'm thinking probably we simply extend the logic that looks at the value passed in, and if it is an object plucks off the value key as value and the rest as options.

I need this for a current client project so I will implement a fix and submit a PR.