Как добавить jquery-ui на элемент внутри приложения Vue.js?

Question

[Игорь Че]

Пытаюсь привязать jQuery timepicker к input внутри приложения Vue.js.
Вот так скрипт срабатывает, но данные из инпута не сохраняются в data.

app = new Vue({
updated() {
            $('.dt1').timepicker({
                'timeFormat': 'HH:mm',
                'stepMinute': 5,
            });
    }
});

Я так понимаю, нужно использовать директивы. С ними тоже поэкспериментировал, но ничего не выходит. Timepicker вообще не вызывается.

Vue.directive('picker', {
        inserted: function (el) {
            el.timepicker({
                'timeFormat': 'HH:mm',
                'stepMinute': 5,
            });
        }
    });

И кусок из HTML:

<input class="dt1" type="text" v-picker v-model="row.val">

Answer 1

[Игорь Че]

Сделал. Мне не очень нравится как, но работает. У timepicker есть метод onClose, который вызывается при закрытии модального окна таймпикера. На это метод я навесил функцию, обновляющую конкретную запись в data. Другого способа не нашел.
Было бы замечательно, если можно было бы изменить значение элемента массива data, обратившись к id элемента, связанного с ним через v-model.

directives: {
            picker: {
                inserted: function (el, binding) {
                    $(el).timepicker({
                        'timeFormat': 'HH:mm',
                        'stepMinute': 5,
                        onClose: function(dateText) {
                            app.updateVal(binding.value['i'], binding.value['day'], dateText)
                        }
                    });
                }
            }
        },

        methods:{
            updateVal : function (i, day, time) {
                this.data[i][day] = time;
            },
        }

Шаблон приводить целиком не стану. Вот его часть:

<input type="text" v-model="row.mon_from" v-picker="{i: i, day: 'mon_from'}">

i, day - параметры передаваемые директиве.
i - номер итерации из цикла, в который завернут инпут.

Comments

[Evgeny Kulakov]

Не очень представляю вашу специфику. Но я бы сделал отдельный компонент с timepicker, из него бы получал данные и далее их обрабатывал. Т.е. timepicker максимально простой, только возвращает время и инициализируется какими-то данными. Так его будет проще переиспользовать.
Вариант: https://codepen.io/kerf/pen/Vbvbqd

Answer 2

[Evgeny Kulakov]

Вариант "чтобы работало": https://codepen.io/kerf/pen/rmNgay
Но это не масштабируемое решение.

Comments

[Игорь Че]

Да, немасштабируемых решений много попадалось. Вообще, судя по тому что сумел найти, у всех data состоит из 1 элемента ))