BootstrapVue表未显示数据

时间:2018-10-22 21:17:16

标签: vuejs2 bootstrap-vue

我正在尝试使用here找到的bootstrapVue表

如果我使用他们的示例,该表的效果很好。

  <b-table striped hover :items="items"></b-table>

但是一旦我使用

<b-table striped hover :fundingInstructions="fundingInstructions"></b-table>

我的表没有显示,当我查看开发工具时,我看到我的表从我的api返回的每个对象都有[object,Object]。 enter image description here  如果我用控制台记录数据,我会看到一个包含多个对象的数组[]。如何获取表格以显示数据?

 const items = [
  { isActive: true,  date:'10/20/2018', amount:'$4568.00', city:'FL Palm Beach' },
  { isActive: false,  date:'10/21/2018', amount:'$789.23', city:'FL Daytona Beach' },
  { isActive: false,  date:'10/21/2018', amount:'$999.99', city:'FL Key West' },
  { isActive: true,  date:'10/22/2018', amount:'$589.00', city:'FL Deltona' }
]

 export default {
    data() {
      return {
        fundingInstructions : [],
         fields: [ 'subMerchantName', 'fundsTransferId', 'amount' ,'accType', 'submitDate' ],
        items: items
      }
      },
         methods:{
           async GetFundingInstructionInfo(){
             this.fundingInstructions = await api.getAllFundingInstructions()
}

1 个答案:

答案 0 :(得分:1)

好的,所以我弄清楚了问题所在,因此找到了解决方案。 在表格html中,它应该看起来像这样

  <b-table striped hover :items="fundingInstructions"></b-table>

似乎项是一个关键术语,您的收藏品用引号引起来。就是这样!