vue でのこのポインティングの問題について (詳細なチュートリアル)

最近、vue+axios の使い方を勉強しているのですが、使用中に問題が発生しました。この記事では主に、Vue で axios を使用する際のポインティングの問題に関する関連情報を紹介します。非常に詳細なサンプルコードが含まれているので、困っている友人はそれを参照できます。

前書き

ご存知のとおり、axios は vue-resource の後に表示されるデータをリクエストする Vue のプラグインです。 vue が 2.0 にアップデートされた後、作者の Youda は今後 vue-resource をアップデートしないと発表しましたが、axios を推奨しました。より詳細な紹介については、ここを参照してください: //www.jb51.net/article/109444.htm

この記事では主に、Vue が axios を使用する場合のポインティングの問題を紹介します。以下では多くは説明しません。見てみましょう。

1. 解決策

axios を使用して vue でネットワーク要求を行う場合、これは vue を指していませんが、矢印関数 "=>" を使用して解決できます。問題。以下の通り:

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 内部のアロー関数「=>」は、コンテキストによって決定されます (つまり、外部の呼び出し元 vue によって決定されます)。

3. 余談

「=>」関数を使用すると、前の 2 つの記述方法に別れを告げることができます:

bind(this) を使用して this を変更します。匿名関数のポインタ bind(this)来改变匿名函数的this指向

hack写法 var _this= this;

ハックの書き方 var _this= this;:

loginAction(formName) {
 var _this= this;
 this.$axios.post("...")
 .then(function(response){
  console.log(_this); //这里 _this 指向vue
 })
 });
 }

以上、皆さんの参考になれば幸いです。

関連記事:

ionic3でランダムレイアウトのウォーターフォールフローを実装する方法

JSでトップへ戻る効果を実装する方法

JavaScriptでコンテンツを追加する要素スクロールバーループを実装する方法

vue プロジェクトを nginx にデプロイする (詳細なチュートリアル)

js でタイムスタンプ形式を変換する方法

vue で dom 要素を取得する方法

vue で実装する方法

で全文を読むwebpack vue プロジェクトのビルド方法

nodejs で OAuth2.0 認可サービス認証を実装する方法

🎜

以上がvue でのこのポインティングの問題について (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。