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'
        });
     });
}