Используем jQuery плагины в vue.js

Пример на подключение daterangepicke

Решение 1: Подключение через mounted

Решение в лоб: инициализировать jquery плагины в mounted.
Плюсы: можно прокидывать данные через обработку событий jquery
Минусы: не кастомно. Если у вас используется плагин на компоненте то будет довольно топорно

Решение 2: подключить в виде директивы

Создать директиву по которая будет указывать что на данном элементе срабатывает jquery плагин
Плюсы: По html будет понятно что тут используем jquery плагин
Минусы: нет прямо доступа до данных. Вызов события на элементе позволит измененные данные в vue

<div id="render">
<input v-model="date" v-daterangepicker/>
</div>

Js код

new Vue({
    el: "#render",
    data: {
        date: undefined,
    },
    directives: {
        daterangepicker: {
            bind: function (el) {
                $(el).on('change', function () {
                    el.dispatchEvent(new Event('input'));
                }).daterangepicker({
                    locale: {format: 'DD.MM.YYYY'}
                })
            }
        }
    },
    methods: {}
});

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *