Monday, May 22, 2017

V-Model not binding with the mask jquery

I am using form with v-model for phone input with mask library

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js" type="text/javascript"></script> 
<input type="text" v-model="phone" placeholder="телефон" class="form-control" id="phone">

when the vue created all fields set with mask

    created: function () {
                var options =  {
                     onComplete: function(e) {
                         var event = document.createEvent('HTMLEvents');
                         event.initEvent('input', true, true);
                         e.currentTarget.dispatchEvent(event);
                         $("#phone").trigger('change');
                     }
                };
                jQuery(function($){
                    $("#phone").mask("+7 (999) 999-9999", options);

               });

I know that jquery and vue have different events handling so I've generated in options onComplete event handing which fire HTML event. It's does not working, what's wrong?



via NickSergeev

Advertisement