[Vuejs]-Get API with VueJS and axios : LifeCycle issue

by

0👍

There is no issue with your code. It is all about asynchronous code.

axios.get('http://5.135.119.239:3090/notes/')
.then(function(response){
  console.log(this.notes); // 2
  this.notes = response.data; 
  console.log(this.notes); // 3
}.bind(this));

console.log(this.notes) // 1
let myDraggable = this.$refs.myDraggable;
this.initInteract(myDraggable);

I’ve numbered the console.log() calls in order they are printed.

The first log prints nothing because it is called before the request resolves.

The second prints nothing because this.notes is not set yet.

The third prints the data after you have set it.

Also, you may want to lose bind(this) and replace the response callback with an arrow function.

Leave a comment