Currently, I have a form that uses v-model for phone input along with a 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="Phone Number" class="form-control" id="phone">
Upon the creation of vue, all fields are supposed to be set with the designated 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 understand that jQuery and Vue handle events differently, so I added an onComplete event handling in the options object to trigger an HTML event. However, it doesn't seem to be working as expected. What could possibly be wrong?