Как использовать метод форматирования с асинхронным вызовом

Question

я пытаюсь отобразить некоторые данные, используя b-таблицу и метод форматирования, используя axios с методом расширения, но это не правильно отображает.

это то, что у меня есть https://codepen.io/damian-garrido/pen/MWgxqeZ

html template

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

js файл

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
          }))
      }
    }
  })
}

console.log возвращает имена по мере необходимости, но не отображает их в таблице.

Answer 1

Таблица formatter методы должны быть синхронными.

Вам потребуется сделать ваш форматтер методом async, который использует await для возврата значения из вашего форматтера.Обратите внимание, что это замедлит рендеринг вашего приложения для обхода контента, так как каждая строка должна будет дождаться завершения асинхронного вызова, прежде чем сможет отрисовать строку таблицы.

Лучше всего будет выполнить обработку поиска в вашемприложение, а затем передать эти данные в таблицу.