Concernant ce problème de pointage dans vue (tutoriel détaillé)

J'ai récemment appris à utiliser vue+axios et j'ai trouvé un problème lors de l'utilisation. Je partagerai avec vous le résumé ci-dessous. Cet article vous présente principalement les informations pertinentes sur le problème de pointage lorsque vue utilise axios. l'article utilise un exemple de code L'introduction est très détaillée, les amis dans le besoin peuvent s'y référer.

Avant-propos

Comme nous le savons tous, axios est un plug-in pour Vue permettant de demander des données qui apparaissent après vue-resource. Après la mise à jour de vue vers 2.0, l'auteur Youda a annoncé qu'il ne mettrait plus à jour vue-resource, mais a recommandé axios. Pour une introduction plus détaillée, vous pouvez vous référer ici : //www.jb51.net/article/109444.htm

Cet article présente principalement le problème de pointage lorsque Vue utilise axios, je n'en dirai pas beaucoup plus. ci-dessous. Jetons un coup d’œil à l’introduction détaillée.

1. Solution

Lorsque vous utilisez axios pour effectuer des requêtes réseau en vue, vous constaterez que cela ne pointe pas vers vue, mais l'est. undefined , qui peut être résolu à l'aide de la fonction fléchée "=>". Comme suit :

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

La fonction flèche "=>" dans ES6 interne c'est la portée lexicale, Déterminé par le contexte (c'est-à-dire déterminé par la vue de l'appelant externe).

3. Digression

Grâce à la fonction "=>" >

Pour changer le pointeur this de la fonction anonymebind(this)

Méthode d'écriture de hack

 : var _this= this;

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

Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère. sera utile à tout le monde à l’avenir.

Articles connexes :

Comment implémenter un flux de cascade de disposition aléatoire dans ionic3

Comment implémenter l'effet de retour en haut dans JS

Comment implémenter une boucle de barre de défilement d'élément pour ajouter du contenu en JavaScript

Déployer le projet Vue sur nginx (tutoriel détaillé)

Comment convertir le format d'horodatage en js

Comment obtenir l'élément dom dans vue

Comment le faire dans vue Lire le texte intégral

Comment créer un projet vue sur webpack

Comment implémenter l'authentification du service d'autorisation OAuth2.0 dans nodejs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!