[Vuejs]-Only last of components get details filled

5👍

The problem is because the self variables you’ve declared in your getStats() and getCoin() methods are bound to the window object, and not properly scoped to each method. A simple fix would be to replace each self = this; statement with var self = this;.

Let me explain.

When you declare a new variable without using the var, let or const keywords, the variable is added to the global scope object, which in this case is the window object. You can find more info about this JavaScript behaviour here https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ or check the var docs on MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)

-1👍

You shouldn’t directly reassign data value because Vue cannot detect property additions and rerender view. You should do it via Vue.set or this.$set like this:

self.$set(self.coinData, 'name', response.data.coin.name)
...

Leave a comment