Vue ElementUI Axios报错: Uncaught (in promise) TypeError: Cannot read property '$message' of undefined

从头再来!!!

出错的代码如下:

        login() {
                this.loading = true
                let userInfo = {account: this.loginForm.account, password: this.loginForm.password, captcha: this.loginForm.chptcha}
                this.$api.login.login(userInfo).then( function(res) {
                    if (res.msg != null) {
                        this.$message({message: res.msg, type: ‘error‘})
                    } else {
                        Cookies.set(‘token‘, res.data.token)
                        sessionStorage.setItem(‘user‘, userInfo.account)
                        this.$router.push(‘/‘)
                    }
                    this.loading = false
                }).catch(function(res) {
                    this.$message({message: res.msg, type: ‘error‘})
                })
            },

今天遇到这个问题,网上有两大解决思路,

一种是保存好this。

https://www.jianshu.com/p/344df9332bbc

**在调用axios之前先保存this,const that = this,然后在回调中使用that代替this;

第二种,感觉高档点,使用ES6的=>箭头函数。

https://www.cnblogs.com/xifengxiaoma/p/9535700.html

        login() {
                this.loading = true
                let userInfo = {account: this.loginForm.account, password: this.loginForm.password, captcha: this.loginForm.chptcha}
                this.$api.login.login(userInfo).then( (res) => {
                    if (res.msg != null) {
                        this.$message({message: res.msg, type: ‘error‘})
                    } else {
                        Cookies.set(‘token‘, res.data.token)
                        sessionStorage.setItem(‘user‘, userInfo.account)
                        this.$router.push(‘/‘)
                    }
                    this.loading = false
                }).catch(function(res) {
                    this.$message({message: res.msg, type: ‘error‘})
                })
            },

使用箭头函数替代普通函数,ES6中的箭头函数 “=>” 内部的 this 属于词法作用域,由上下文确定(也就是由外层调用者vue来确定)。

Vue ElementUI Axios报错: Uncaught (in promise) TypeError: Cannot read property '$message' of undefined

原文地址:https://www.cnblogs.com/aguncn/p/12251266.html

时间: 2024-10-07 20:42:31

Vue ElementUI Axios报错: Uncaught (in promise) TypeError: Cannot read property '$message' of undefined的相关文章

vue-router点击菜单栏同一个模块报错 ———— Uncaught(in promise) NavigationDuplicated error .......

在做移动端底部导航时,鼠标双击各个选项会报如下错误,但是单击时不会出现任何问题. 出现这个bug的原因就是vue-router版本问题,vue-router 3.0版本以上的回调形式是promise api的形式,返回的是一个promise,如果没有捕获到错误,控制台始终会出现上图的警告: 解决方法之可以是安装低版本的vue-router或者捕获抛出放入错误: 解决方法大概包括以下3种解决方法: 1)删除node_modules文件夹,然后使用“cnpm install”重新安装依赖(ps:尝试

axios报错: Cannot read property 'protocol' of undefined ....

错误: Uncaught (in promise) TypeError: **Cannot read property 'protocol' of undefined ... 源码: 完整错误: import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(axios, VueAxios) 修正一:(亲测) import axios from 'axios' import VueAxios from 'vue-axios'

后台返回json字符串 页面js报错 Uncaught SyntaxError: Unexpected identifier

后台json字符串是 [{"name": "报销申请", "id": "start"}, {"name": "部门经理审批", "id": "departAudit"}, {"name": "总经理审批", "id": "bossAudit"}, {"name

easyui Datagrid查询报错Uncaught TypeError:Cannot read property 'length' of undefined

1.问题描述 easyui中datagrid执行loadData方法出现如下异常:Cannot read property 'length' of undefined 2.一开始怀疑是js或者页面的问题,然后从早上干到下午,网上各种方法用尽了就是不行! 最后发现规律了: 使用mybatis从数据库查询返回的List不报错,但是自己new的ArrayList总是报错! 后来发现原来mybatis返回的不是ArrayList!而是PageList! 3.解决问题 PageList中有个参数Pagin

jQuery mobile报错 Uncaught TypeError: Cannot read property 'concat' of undefined

写一个jQuery mobile的demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="styl

jquery报错Uncaught ReferenceError: $ is not defined

原来我的js引用在那个include的jsp之前..然后一直报错Uncaught ReferenceError: $ is not defined 最后我把js放到最末尾就没问题了

[Sencha ExtJS] 关于build production后,浏览器运行报错&#39;Uncaught TypeError: c is not a function&#39;

原文:http://blog.csdn.net/lovelyelfpop/article/details/51328783 估计很多人用 ExtJS6 + Sencha Cmd 6 的时候,遇到过一种情况:开发的时候明明正常的,build之后运行就报了下面的错误 Uncaught TypeError: c is not a function 心里一万个草泥马奔腾:What the hell is this?(这TM什么JB玩意?) 其实根本原因是你忘记了requires某个类导致的. 比如你这样

android webView 图片加载不出来 后台报错Uncaught TypeError: Cannot call method &#39;getElementsByTagName&#39; of null

在之前,webView加载图片完全没有问题.直到前端H5开发换新的加载图片的方式,导致图片忽然加载不出来了. 从后台日志看到了webview 打印了报错信息 Cannot call method 'getElementsByTagName' of null 我怀疑是不是由于此处报错终止了图片加载的进程. 分析此处错误出现的原因: 由于调用的H5界面的js其中的写法不规范,webView在加载的时候,调用的doom模型为空,导致了其图片没有加载出来 解决办法: 在客户端webView.getSet

Vue热更新报错(log.error(&#39;[WDS] Errors while compiling. Reload prevented.&#39;))

log.error('[WDS] Errors while compiling. Reload prevented.');中的WDS其实是webpack-dev-serverwebpack的意思,用来实现自动刷新的.但你在Vue组件进行频繁刷新时,如果没有安装Webpack,虽然页面可以正常显示,但是控制台会在你每次刷新时就报错.解决方法是:在开发目录下安装Webpack,命令为npm install webpack-dev-server --save-dev即可,安装完成之后会在node_mo