VueJS - привязка модели не работает с входами с использованием плагинов jQuery

Question

Я работаю над преобразованием формы для использования VueJS. Форма имеет вход для даты рождения, которая использует eonasdan/bootstrap-datetimepicker (http://eonasdan.github.io/bootstrap-datetimepicker/).

Проблема заключается в том, что при изменении значения ввода dob с помощью DateTimePicker VueJS не привязывается к этому. Он работает только в том случае, если пользователь вводит непосредственно входные данные, чего я пытаюсь избежать (чтобы правильно форматировать дату).

Сам вход нет ничего особенного:

<div class="input-group date"> 
     <input id="dob" 
     v-model="newCamper.dob" 
     placeholder="MM-DD-YYYY" 
     class="form-control" 
     name="dob" type="text"> 
     <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
    </div> 

UPDATE

Я также попытался это с digitalbrush Маске Input Plugin, тот же результат. Кажется, что Vue не признает ничего, кроме простого ввода текста на вход. Тем не менее, это работает - хотя это немного неуклюжим:

$(document).ready(function() { 
      var dob = $("#dob"); 
      dob.mask("99/99/9999",{placeholder:"MM/DD/YYYY"}); 
      dob.change(function() { 
       var value = $(this).val(); 
       vm.$data.newCamper.dob = value; 
      }) 
     }); 

Answer 1

UPDATE: директивы изменились довольно резко в Vue.js 2.0 - решение было бы включать в себя компонент и V-модель. Этот ответ касался Vue.js < 2.0.

Ваше решение типично при использовании v-модели и нажатия клавиш не задействованы. В подобных ситуациях, для того, чтобы сделать его многоразовым, я обычно пишу директиву:

Vue.directive("date", { 
    "twoWay": true, 
    "bind": function() { 
     var self = this; 

     self.mask = "99/99/9999"; 
     $(self.el).mask(self.mask, { placeholder:"MM/DD/YYYY" }); 
     $(self.el).change(function() { 
      var value = $(this).val(); 
      self.set(value); 
     }); 
    }, 
    "unbind": function() { 
     var self = this; 

     $(self.el).unmask(self.mask); 
    } 
}); 

И использовать его как это:

<div class="input-group date"> 
    <input id="dob" 
     v-date="newCamper.dob" 
     placeholder="MM-DD-YYYY" 
     class="form-control" 
     name="dob" type="text"> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
</div>