vue使用axios時(shí)關(guān)于this的指向問(wèn)題詳解
前言
眾所周知axios是vue-resource后出現(xiàn)的Vue請(qǐng)求數(shù)據(jù)的插件。vue更新到2.0之后,作者尤大就宣告不再對(duì)vue-resource更新,而是推薦的axios。更多的詳細(xì)介紹大家可以參考這里：http://m.fzitv.net/article/109444.htm
本文主要介紹了關(guān)于vue使用axios時(shí)this的指向問(wèn)題，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
1.解決辦法
在vue中使用axios做網(wǎng)絡(luò)請(qǐng)求的時(shí)候，會(huì)遇到this不指向vue，而為undefined，可以使用箭頭函數(shù)"=>"來(lái)解決。如下：
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); //箭頭函數(shù)"=>"使this指向vue
});
});
}
}
2. 原因
ES6中的 箭頭函數(shù) "=>" 內(nèi)部的this是詞法作用域，由上下文確定（也就是由外層調(diào)用者vue來(lái)確定）。
3. 題外話
使用"=>"函數(shù)，就可以告別之前的兩種寫(xiě)法了：
bind(this)來(lái)改變匿名函數(shù)的this指向
hack寫(xiě)法 var _this= this; ：
loginAction(formName) {
var _this= this;
this.$axios.post("...")
.then(function(response){
console.log(_this); //這里 _this 指向vue
})
});
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue router使用query和params傳參的使用和區(qū)別
本篇文章主要介紹了vue router使用query和params傳參的使用和區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
本文給大家分享的是個(gè)人在使用vue.js制作的文章和評(píng)論的分頁(yè)組件，并使用webpack打包起來(lái)，這里推薦給大家，有需要的小伙伴可以參考下2016-06-06
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們?nèi)粘ｉ_(kāi)發(fā)中，表格業(yè)務(wù)基本是必不可少的，對(duì)于老手來(lái)說(shuō)確實(shí)簡(jiǎn)單，家常便飯罷了，但是對(duì)于新手小白如何最快上手搞定需求呢？本文從思路開(kāi)始著手，幫你快速搞定表格2022-11-11
這篇文章主要介紹了vue使用路由router-view的相關(guān)知識(shí),其原理就是采用?SPA(single-page-application)?模式,就是只有一個(gè)?Web?頁(yè)面的應(yīng)用,通過(guò)?router?來(lái)控制頁(yè)面的刷新和迭代,感興趣的朋友一起看看吧2023-12-12
Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù)
這篇文章主要介紹了Vue如何調(diào)用接口請(qǐng)求頭增加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
element-ui table span-method(行合并)的實(shí)現(xiàn)代碼
element-ui官網(wǎng)中關(guān)于行合并的例子是根據(jù)行號(hào)進(jìn)行合并的，這顯然不符合我們?nèi)粘ｉ_(kāi)發(fā)需求，因?yàn)橥ǔＮ覀僼able中的數(shù)據(jù)都是動(dòng)態(tài)生成的，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12
ElementUI多個(gè)子組件表單的校驗(yàn)管理實(shí)現(xiàn)
這篇文章主要介紹了ElementUI多個(gè)子組件表單實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue中form表單禁用專(zhuān)用組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue滑動(dòng)解鎖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue實(shí)現(xiàn)select下拉顯示隱藏功能
這篇文章主要介紹了vue實(shí)現(xiàn)select下拉顯示隱藏功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09