【问题标题】:BootstrapVue Table not displaying dataBootstrapVue 表不显示数据
【发布时间】:2019-03-27 00:46:05
【问题描述】:

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

如果我完全使用他们的示例,那么表格效果很好。

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

但是一旦我使用了

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

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

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

【问题讨论】:

    标签: vuejs2 bootstrap-vue


    【解决方案1】:

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

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

    items 似乎是一个关键术语,您的收藏在报价单中。就是这样!

    【讨论】:

    • 耶稣!我永远不会想到这一点,我已经坚持了半个多小时,他们真的应该选择更清晰的命名!
    • 谢谢。他们的文档肯定有问题:items="items"。我都改变了,因为不清楚。你解决了我的问题。
    猜你喜欢
    • 1970-01-01
    • 2021-02-01
    • 1970-01-01
    • 2020-04-15
    • 2020-11-09
    • 2018-03-22
    • 2020-09-26
    相关资源
    最近更新 更多