Vue.js 2 & Axios Scope Ausgabe

Question

Ich habe vorher mit diesem "Problem" gearbeitet, aber ich kann mich nicht wirklich daran erinnern, wie ich die Ergebnisse richtig bekommen habe. Ich bin mit Vue 2 bis einige Daten in Variablen laden, die ich in der HTML-Seite laden:

window.Vue = require('vue'); 
window.axios = require('axios'); 

const app = new Vue({ 
    el: '#app', 
    data: { 
     operaciones: [], 
     sopts: [] 
    }, 
    created: function() { 
     this.loadOperationTypes(); 
     console.log(this.operaciones); <-- SC 
    }, 
    methods: { 
     loadOperationTypes: function() { 
      axios.post('/api/operaciones') 
      .then(response => { 
       console.log(response.data); <-- FC 
       this.operaciones = response.data 
      }) 
      .catch(error => { 
       this.operaciones = error; 
      }); 
     } 
    } 
}); 

Wenn ich console.log(response.data) im Axios Funktionsumfang (FC) schreiben druckt:

Aber wenn ich console.log(response.data) im created_ function() {} Umfang schreiben, er druckt:

ich bereits versucht, diese wie zu verwenden:

axios.post('/api/operaciones') 
.then(response => { 
    console.log(response.data); 
    app.operaciones = response.data 
}) 

Und

var $this = this; 
axios.post('/api/operaciones') 
.then(response => { 
    console.log(response.data); 
    $this.operaciones = response.data 
}) 

Aber das gleiche ist, irgendwelche Hinweise?

Vielen Dank im Voraus.

Answer 1

Dies ist wirklich ein separates Problem von Umfang. Jede der Lösungen, die Sie in Ihrer Frage ausprobiert haben, funktioniert ordnungsgemäß, um this.operaciones festzulegen. Das Problem ist, dass es sich um eine asynchrone Operation handelt.

Die Linie

console.log(this.operaciones); 

in created wird ein leeres Array immer Protokoll. Dies liegt daran, dass loadOperationTypes eine asynchrone Operation ausführt; das heißt es dauert mal.

Sie scheinen zu erwarten, dass alles in loadOperationTypes abgeschlossen wird, bevor die console.log ausgeführt wird, aber das ist nicht der Fall. loadOperationTypes wird die post an den Server initiieren, und dann wird der Code fortgesetzt und die console.log ausführen. Wenn eine Antwort vom Server zu einem späteren Zeitpunkt empfangen wird, wird operaciones mit der Antwort ausgefüllt.

console.clear() 
 

 
const app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     operaciones: [], 
 
     sopts: [] 
 
    }, 
 
    created: function() { 
 
     this.loadOperationTypes(); 
 
     console.log("THIS WILL ALWAYS BE AN EMPTY ARRAY", this.operaciones); 
 
    }, 
 
    methods: { 
 
     loadOperationTypes: function() { 
 
      axios.post('https://httpbin.org/post', ["some", "data"]) 
 
      .then(response => { 
 
       console.log("THIS SHOULD HAVE DATA", response.data.json); 
 
       this.operaciones = response.data.json 
 
      }) 
 
      .catch(error => { 
 
       this.operaciones = error; 
 
      }); 
 
     } 
 
    }, 
 
    watch: { 
 
     operaciones(newVal){ 
 
     console.log("THIS WILL HAVE DATA WHEN operaciones IS POPULATED", newVal) 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script> 
 

 
<div id="app"></div>