BootstrapVue Table 不显示数据

Question

我正在尝试使用 bootstrapVue table 发现 here

如果我完全使用他们的示例，table 效果很好。

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

然而一旦我使用

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

我的 table 不显示，当我查看开发工具时，我看到我的 table 有 [object,Object] 我 return 来自 [=] 的每个对象24=]。如果我控制台记录我的数据，我会看到一个包含多个对象的数组 []。如何让 table 显示我的数据？

 const items = [
  { isActive: true,  date:'10/20/2018', amount:'68.00', city:'FL Palm Beach' },
  { isActive: false,  date:'10/21/2018', amount:'9.23', city:'FL Daytona Beach' },
  { isActive: false,  date:'10/21/2018', amount:'9.99', city:'FL Key West' },
  { isActive: true,  date:'10/22/2018', amount:'9.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()
}

Answer 1

好的，所以我想出了问题是什么，因此找到了解决方案。在 table html 中应该是这样的

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

items 似乎是一个关键术语，您的 collection 出现在引文中。就是这样！

BootstrapVue Table 不显示数据

BootstrapVue Table not displaying data

vuejs2

bootstrap-vue