Vue.js 2 - jQuery插件无效

时间:2017-03-20 14:35:47

标签: javascript jquery vuejs2

我正在使用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。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我试过这样......它奏效了。

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