How to use formatter method with async call

Question

im try to display some data using b-table and the formatter method using axios with the spread method but this its not displaying correctly.

this is what i have https://codepen.io/damian-garrido/pen/MWgxqeZ

html template

<div id="app">
  <b-table
    :fields="fields"
    :items="items">    
  </b-table>
</div>

js file

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        fields: [
          {
            key: 'owner',
            label: 'Poke Owner'
          },
          {
            key: 'pokemonIds',
            label: 'Poke Name',
            formatter: 'getPokeName'
          }
        ],
        items: [
          {
            owner: 'Juan',
            pokemonIds: [3,4]
          },
          {
            owner: 'Diego',
            pokemonIds: [7,9,14]
          }
        ]
      }
    },
    methods: {
      getPokeName: function (pokeIds) {
        let promises = []
        for (let id of pokeIds) {
          promises.push(axios.get(`https://pokeapi.co/api/v2/pokemon/${id}`))
        }
        axios.all(promises)
          .then( axios.spread((...responses) => {
            let names = ''
            for (let r of responses) {
              names += r.data.name + ', '
            }
            console.log(names)
            return names
          }))
      }
    }
  })
}

the console.log return the names, as i need, but not display this on the table.

Answer 1

Table formatter methods must be synchronous.

You would need to make your formatter an async method that uses await to return the value from your formatter. Note that this will slow your app rendering to a crawl as each row will have to wait for the async call to finish before it can render the table row.

Your best bet would be to do the lookup processing in your app, and then pass that data to the table.