Question

im尝试使用b表和使用axios的formatter方法将某些数据显示为split方法，但这无法正确显示。

这就是我的https://codepen.io/damian-garrido/pen/MWgxqeZ

html模板

<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方法。请注意，这将使您的应用程序呈现速度变慢，因为每一行都必须等待异步调用完成才能呈现表行。

您最好的选择是在应用中进行查找处理，然后将数据传递到表中。

如何在异步调用中使用格式化程序方法

1 个答案: