Eigenschaft in Axios Promise in Vue JS nicht setzen

Question

Ich versuche VueJS und Axios zu verwenden, um eine HTTP-Anfrage an ein Laravel-Backend zu machen, um JSON zu erhalten und dann den JSON zu verwenden, um eine errorMessage-Eigenschaft für meine Komponente zu aktualisieren .

  Axios.post('/api/login', { 
       email: this.email, 
       password: this.password 
      }).then((response) => { 
       this.errorMessage = response.message; 
      }).catch((error) => { 
       console.error(error); 
      }) 

Das Problem ist, dass es nicht in der Lage ist sein this.errorMessage aus irgendeinem Grunde zu verweisen, bin ich falsch hier etwas zu tun? Ich mache korrekt die HTTP-Anfrage und die JSON-Antwort kommt genau wie erwartet zurück, wenn ich this.errorMessage it this.errorMessage es sagt, dass es undefiniert ist, obwohl ich es bereits mit Erfolg anderswo manipuliert habe ...

Hier ist der gesamte Code für diese Komponente

export default { 
    methods: { 
     submitForm: function(e) { 
      e.preventDefault(); 

      Axios.post('/api/login', { 
       email: this.email, 
       password: this.password 
      }).then((response) => { 
       debugger; 
       this.errorMessage = response.data.message; 
      }).catch((error) => { 
       console.error(error); 
      }); 
     } 
    }, 
    data: function() { 
     return { 
      errorMessage: null, 
      email: null, 
      password: null 
     } 
    }, 
    components: { 
     'error': Error 
    } 
} 

LÖSUNG:

die ursprüngliche Anforderung richtig, Fett Pfeil Funktionen ist, sollte den Wert von this halten, war das Problem mit Chrome Debugger, die die Werte zeigten zu mir als undefined sogar th Obwohl sie nicht ... Sorry für die dumme Frage, ich hoffe, dass dies anderen Menschen helfen wird, über diese Art von Problem zu kommen.

Answer 1

Axios.post nähere Funktion so Eigenschaft definieren, innerhalb es wie privat bei näherer Funktion aussieht.

Sie haben Variable zu definieren außerhalb näher wie folgt aus:

//this will pick your data. 
let self = this; 


Axios.post('/api/login', { 
    email: this.email, 
    password: this.password 
    }).then((response) => { 
    self.errorMessage = response.message; 
      }).catch((error) => { 
       console.error(error); 
      }) 

Auch wenn response.message ist nicht definiert dann response.body.message verwenden oder die Rückkehr Variable aus Laravel.

Answer 2

Die Daten der Antwort ist unter der data Eigenschaft zur Verfügung:

this.errorMessage = response.data.message;