Vue + Element 中 this.$message 失效问题解决方法

 2019-03-02 18:05:59   {{zan}}   348 

        Vue的Element确实给开发者提供了很大的便捷,比如消息提示中的:this.$message 函数就非常好用。但是在某些情况下是失效的,比如如下代码所示:

onSubmit: function () {
    if (this.formInline.title === '') {
        // 这里可以成功使用$message函数
        this.$message({
            message: '失败!',
            type: 'warning'
        });
    } else {
        $.post('upload',
            {
                title: this.formInline.title,
            },
            function (res) {
                // 这里使用$message函数则是失效的
                this.$message({
                    message: '成功!',
                    type: 'success'
                });
            });
    }
},

        可以看到后台返回的数据使用this.$message就会失效,因为 this 指的不再是Vue了,所以... ....

Vue.prototype.$message({
    message: '成功!',
    type: 'success'
});

        使用全局变量Vue.prototype来调$message()就可以了。


        欢迎指导!

千而の大狮子~

提交 清空 1楼: 当然也可以在最前面定义,如var vm = this; 这样后面也可以直接用this.$message();
2019-03-21 21:53