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

Я работаю над преобразованием формы для использования 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>

ОБНОВЛЕНИЕ

Я также пробовал это с плагином ввода с масками digitalbrush, тот же результат. Кажется, что 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;
    })
});

html vue.js bootstrap-datetimepicker
person NightMICU    schedule 06.06.2015    source источник
comment
Мне нужно сделать то же самое с моим DatePicker. Есть такой метод set: vm.$set(keypath, value). Он делает то же самое, что и vm.$data.keypath = value, но немного чище. Подробнее здесь: vuejs.org/api/instance-methods.html   -  person tptcat    schedule 07.06.2015

Ответы (1)


arrow_upward
8
arrow_downward

ОБНОВЛЕНИЕ: Директивы в 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>
person David K. Hess    schedule 20.06.2015