CODEWITHSUNDEEP
javascripttwitter-bootstrapvue.jsbootstrap-4bootstrap-vue
testorone
testorone

Reputation: 15

table not displayed using bootstrap vue

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>

Upvotes: 0

Views: 531

Answers (1)

Hiws
Hiws

Reputation: 10414

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

Upvotes: 2

Related Questions