溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關vue如何使用axios時解決關于this指向的問題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
1.解決辦法
在vue中使用axios做網絡請求的時候，會遇到this不指向vue，而為undefined，可以使用箭頭函數"=>"來解決。如下：
methods: {
loginAction(formName) {
this.$axios.post('http://127.0.0.1/u/subLogin', {
username: this.username,
password: this.password
})
.then(function(response){
console.log(this); //這里 this = undefined
})
.catch((error)=> {
console.log(error); //箭頭函數"=>"使this指向vue
});
});
}
}2. 原因
ES6中的 箭頭函數 "=>" 內部的this是詞法作用域，由上下文確定（也就是由外層調用者vue來確定）。
3. 題外話
使用"=>"函數，就可以告別之前的兩種寫法了：
bind(this)來改變匿名函數的this指向
hack寫法 var _this= this; ：
loginAction(formName) {
var _this= this;
this.$axios.post("...")
.then(function(response){
console.log(_this); //這里 _this 指向vue
})
});
}關于“vue如何使用axios時解決關于this指向的問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
