在vue中關於this指向問題（詳細教程）

最近在學習使用vue axios，在使用中發現了一個問題，以下總結分享給大家，這篇文章主要給大家介紹了關於vue使用axios時this的指向問題的相關資料，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考下。

前言

眾所周知axios是vue-resource後出現的Vue請求資料的外掛程式。 vue更新到2.0之後,作者尤大就宣告不再對vue-resource更新,而是推薦的axios。更多的詳細介紹大家可以參考這裡：//www.jb51.net/article/109444.htm

本文主要介紹了關於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
 })
 });
 }

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在ionic3中如何實現隨機佈局瀑布流

#在JS中如何實現回到頂部效果

在JavaScript中如何實作元素捲軸循環追加內容

#在nginx上部署vue專案（詳細教學）

在js中如何實作轉換時間戳格式

在vue中如何取得dom元素

在vue中如何實現閱讀全文

在webpack上如何建構vue專案

#在nodejs中如何實作OAuth2.0授權服務認證

#

以上是在vue中關於this指向問題（詳細教程）的詳細內容。更多資訊請關注PHP中文網其他相關文章！