table not displayed using bootstrap vue

Question

I'm trying to display a table of flowers but it won't show. I'm not sure how to use my data to display them. any help would be appreciated

<b-table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Petals</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="flower in flowers" :key="flower.id">
            <td>{{ flower.name }}</td>
            <td>{{ flower.petal }}</td>
          </tr>
        </tbody>
  </b-table>

Hiws · Accepted Answer · 2020-09-11 15:09:58Z

2

That is not how <b-table> is used.

You supply <b-table> with an array, via the items prop, and it will generate the table itself. Which can be further customized by using other props and slots.

I would suggest you look at a few of the examples, to understand how the basics work. https://bootstrap-vue.org/docs/components/table#tables

If you want to write the structure yourself, you should use <b-table-simple>. https://bootstrap-vue.org/docs/components/table#simple-tables

answered Sep 11, 2020 at 15:09

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

table not displayed using bootstrap vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related