Как использовать скрипт jQuery внутри приложения vue.js?

Question

Как использовать скрипт jQuery внутри приложения vue.js?

var app = new Vue({ 
    el: '#app',
    data: {
        users: [{'my_date': ''}]
    }
});

<div id="app">
    <input class="form-control pickadate" v-model="user.my_date" placeholder="My Date">
</div>

Я запускаю скрипт jQuery следующим образом, но когда я добавляю класс .pickadate в свой ввод, он не реагирует, а средство выбора даты не реагируетпоявляются:

$('.pickadate').pickadate({
    max: Date.now(),
    format: "yyyy-mm-dd"
});

Answer 1

Вам нужно подключиться к жизненным циклам Vue (mounted и beforeDestroy).Затем вы можете получить доступ к корневому элементу компонента с помощью this.$el.Вот пример:

<template>
    <div>
        <input class="form-control pickadate" v-model="user.my_date" placeholder="My Date">
    </div>
</template>

<script>
export default {
    data: {
        users: [{'my_date': ''}]
    },
    mounted() {
        $('.pickadate', this.$el).pickadate({
            max: Date.now(),
            format: "yyyy-mm-dd"
        });
    },
    beforeDestroy() {
        // remove pickadate according to its API
    }
};
</script>

См. Официальную документацию для ловушек жизненного цикла Vue: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram