Möchte man via JS/VueJS über Axios einen API-Call machen und anschließend eine Funktion aufrufen, kommt einem unter Umständen der Scope in die Quere. Dazu folgendes Beispiel, so wie ich es im ersten Versuch definieren würde:
axios.post(‚http://localhost:4000/api/customer/get/‘) .
.then(function (response) {
this.customer_data = response.data;
})
Problem ist die Anweisung this.customer_data, denn this bezieht sich auf das Axios Objekt und nicht auf das übergeordnete Objekt/Scope.
Die Lösung ist eigentlich ziemlich einfach. Tatsächlich gibt es zwei Varianten, wobei die zweite mit der Arrow-Funktion etwas besser ist.
Lösung 1
let that = this;
axios.post('http://localhost:4000/api/customer/get/') .
.then(function (response) {
that.customer_data = response.data;
})
Über that ist man also dann wieder im Scope der darüber liegenden Hierarchie.
Lösung 2
axios.post('http://localhost:4000/api/customer/get/') .
then((response) => {
this.customer_data = response.data;
})
Im Prinzip ist die Defintion wie das ursprüngliche nicht funktionierende Beispiel nur mit einer Arrow-Funktion. In einer klassischen Funktion ist der Scope von this an das Objekt gebunden, in dem die Funktion aufgerufen wird. Bei eine Arrow-Funktion hingegen liegt der Scope von this außerhalb der Funktion, in der es referenziert wird.