Bezüglich dieses Zeigeproblems in Vue (ausführliches Tutorial)

Ich habe kürzlich gelernt, vue + axios zu verwenden, und ich werde Ihnen die folgende Zusammenfassung mitteilen Der Artikel verwendet Beispielcode. Die Einführung ist sehr detailliert, Freunde in Not können sich darauf beziehen.

Vorwort

Wie wir alle wissen, ist axios ein Plug-in für Vue zum Anfordern von Daten, die nach vue-resource angezeigt werden. Nachdem Vue auf 2.0 aktualisiert wurde, kündigte der Autor Youda an, dass er vue-resource nicht mehr aktualisieren werde, empfahl aber axios. Eine ausführlichere Einführung finden Sie hier: //www.jb51.net/article/109444.htm

Dieser Artikel stellt hauptsächlich das Zeigeproblem vor, wenn Vue Axios verwendet. Ich werde nicht viel mehr sagen Schauen wir uns unten die ausführliche Einführung an.

1. Lösung

Wenn Sie Axios verwenden, um Netzwerkanfragen in Vue zu stellen, werden Sie feststellen, dass dies nicht auf Vue verweist, sondern auf Vue undefiniert , das mit der Pfeilfunktion „=>“ gelöst werden kann. Wie folgt:

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. Grund

Die Pfeilfunktion „=>“ in ES6 ist der lexikalische Bereich, bestimmt durch Der Kontext wird bestimmt (d. h. durch den äußeren Aufrufer-Vue bestimmt).

3. Exkurs

Mit der Funktion „=>“ können Sie sich von den vorherigen beiden Schreibweisen verabschieden:

bind(this)Um diesen Zeiger der anonymen Funktion zu ändern

Hack-Schreibmethodevar _this= this;:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es so sein wird hilfreich für alle in der Zukunft.

Verwandte Artikel:

So implementieren Sie einen Wasserfallfluss mit zufälligem Layout in ionic3

So implementieren Sie den Back-to-Top-Effekt in JS

So implementieren Sie eine Element-Bildlaufleistenschleife, um Inhalte in JavaScript anzuhängen

Vue-Projekt auf Nginx bereitstellen (ausführliches Tutorial)

So konvertieren Sie das Zeitstempelformat in js

So erhalten Sie ein Dom-Element in Vue

So machen Sie es in Vue Lesen Sie den vollständigen Text

So erstellen Sie ein Vue-Projekt auf Webpack

So implementieren Sie die OAuth2.0-Autorisierungsdienstauthentifizierung in NodeJS

Das obige ist der detaillierte Inhalt vonBezüglich dieses Zeigeproblems in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!