BootstrapVue Table not displaying data

Question

I am trying to use the bootstrapVue table found here

If i use their example exactly the table works great.

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

However once i use

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

My table does not display and when i look in the dev tools i see that my table has [object,Object] for each object i return from my api. If i console log my data i see an array [] with multiple objects. How do i get the table to display my data?

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

Leonardo Wildt · Accepted Answer · 2018-10-23 15:37:50Z

5

Ok, so i figured out what the problem was and hence the solution. In the table html it should look like this

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

It seems that items is a key term and your collection goes in the quotation. That's it!

answered Oct 23, 2018 at 15:37

Leonardo Wildt

2,5975 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sarah Over a year ago

JESUS! I would've never figured this out, I've been stuck with this for over half an hour, they really should've picked more clear naming!

jeffgamedev Over a year ago

Thank you. Their documentation is definitely faulty with :items="items". I had changed both because it was not clear. You resolved my issue.

Collectives™ on Stack Overflow

BootstrapVue Table not displaying data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related