Vue.js 2 - jQuery插件无法正常工作

Question

我正在使用Vue.js并尝试使用jQuery Gritter插件在AJAX调用后显示成功的通知警报。

但是，它没有定义，这是我的main.js：

import Vue from 'vue/dist/Vue';
import axios from 'axios';

window.axios = axios;

new Vue({
    el: '#app',

    data: {
        body: '',
        team_id: $('#team_id').val()
    },

    methods: {
        onSubmit() {
            let self = this;
            axios.post('/tasks', this.$data)
                .then(function (res) {
                    self.$nextTick(function() {
                        self.initGritter(res.data);
                    }.bind(this));
                })
                .catch(function (err) {
                    console.log(err);
                });

        },

        initGritter(data) {
            console.log($); // object
            console.log(jQuery); // object
            console.log($.gritter); //undefined

        }
    },
});

如果你看一下initGritter方法，你会看到jQuery已经加载并准备就绪，但是gritter插件没有。

如果我在控制台中尝试它，jQuery Gritter已准备好在页面加载...它只是无法通过Vue工作。

有任何想法吗？

Answer 1

我试过这样..它有效。

initGritter: function(){
     $(function() {
        $.gritter.add({
            title: 'title',
            text: 'text',
            class_name: 'color warning'
        });
     });
}