Search code examples
javascriptasynchronousvue.jsccxt

Can't list markets using ccxt's load_markets() in vue.js

I am using ccxt for a project. ccxt is a node module that allows me to get real-time data for different cryptocurrencies/markets
I want to extract the crypto pairs from a certain exchange using this code

const ccxt = require('ccxt')
const exchanges = ccxt.exchanges;
async function getMarkets(){
    let acx = new ccxt.acx()
    let markets = await acx.load_markets()
    return markets    
};

I use vue.js for this project and my plan is to make a list of all the markets from this exchange with vue and ccxt, my vue template is this
<select v-model="selected"> <option v-for="pair in pairs"> {{ pair }} </option> </select>

The rest of my code is getting the data from the async function, binding it to a variable so that i can use it as data in my vue code and then use it in the template

let pairs = getMarkets()
console.log(pairs)


export default {
name: 'pair',
data() {
  return {
    pairs,
    msg: 'Pair',
    selected: ''

  }
 }
}

This is what the console.log(pairs) gives in console consolelog
And this is what the vue console gives me in relate to the Pair component vue

Now i think this should work but for some reason there are no options in the list, just like if "pairs" would have been empty but it's not, I think it has something to do with the async function and the options rendering before the function awaits for the markets to load but I'm not sure and it's been bugging me for days, I know that my example is not easy replicable on another machine as I didn't give the code for all components and ccxt is not that popular of a module.

Solution

  • In the mounted hook, try:

    mounted() {
   getMarkets().then(markets => this.pairs = markets)
}