title: how to display data from props in b-table template tag?
body: <p>i am new in vue.js and get some problem while displaying data in b-table. my data from database is fetched properly. and i passed from one file to products.vue and received data in products.vue as props. when i console my data is showing in console properly, but when i used to display data in b-table, i got some problem. data is not displaying correctly.</p>
  <p>please let me know where is mistake in my code?</p>
  <p>Products.vue (script tag)</p>
  <pre><code>
      &lt;script&gt;
      export default {
              props: ['category','singular', 'plural','products'],
              data() {
                  return {
                      title: `All ${this.plural}`,
                      items: [],
                      editing: false,
                      weight_assignment: false,
                      model: null,
                      formTitle: '',
                      fields: [
                          {
                              key: 'index',
                              label: 'S.No.'
                          },
                          {
                              key: 'name',
                              sortable: true
                          },
                          {
                              key: 'weights'
                          },
                          {
                              key: 'default_weight',
                              sortable: true
                          },
                          {
                              key: 'status',
                              sortable: true
                          },
                          {
                              key: 'action'
                          }
                      ],
                     
          }
  
  &lt;/script&gt;
  </code></pre>
  <p>Product.vue (template tag)</p>
  <pre><code>
      &lt;template&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-12&quot;&gt;
                  &lt;div class=&quot;card&quot;&gt;
                      &lt;div class=&quot;card-header&quot;&gt;
                          &lt;h3 class=&quot;card-title&quot;&gt;{{title}}&lt;/h3&gt;
                          &lt;div class=&quot;card-tools&quot;&gt;
                              &lt;b-button variant=&quot;primary&quot; @click=&quot;newItem&quot;&gt;New {{singular}}&lt;/b-button&gt;
                              &lt;div&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                       &lt;div class=&quot;card-body table-responsive p-0&quot;&gt;
                          &lt;spinner v-if=&quot;$root.loading&quot;&gt;&lt;/spinner&gt;
                          &lt;b-table ref=&quot;table&quot; v-for=&quot;type in this.products&quot; :items=&quot;type&quot; :key=&quot;type.id&quot; :fields=&quot;fields&quot; bordered hover :head-variant=&quot;'light'&quot; responsive=&quot;sm&quot; v-else&gt;
                              &lt;template v-slot:cell(index)=&quot;type&quot;&gt;
                                  {{ type.index + 1 }}
                              &lt;/template&gt;
                              &lt;template v-slot:cell(name)=&quot;type&quot;&gt;
                                  &lt;b-img thumbnail fluid :src=&quot;getImageUrl(type.image)&quot; alt=&quot;Image 1&quot; class=&quot;thumb-img&quot;&gt;&lt;/b-img&gt;
                                  {{type.name}}
                              &lt;/template&gt;
                              &lt;template v-slot:cell(weights)=&quot;type&quot;&gt;
                                  &lt;span v-weights=&quot;type.item&quot;&gt;&lt;/span&gt;
                              &lt;/template&gt;
                              &lt;template v-slot:cell(default_weight)=&quot;type&quot;&gt;
                                  &lt;span v-floatFormatter=&quot;type.default_weight&quot;&gt;&lt;/span&gt;{{type.unit.sname}}
                              &lt;/template&gt;
                              &lt;template v-slot:cell(status)=&quot;type&quot;&gt;
                                  &lt;span v-if=&quot;type.status&quot; class=&quot;text-success text-bold&quot;&gt;Active&lt;/span&gt;
                                  &lt;span class=&quot;text-danger&quot; v-else&gt;Inactive&lt;/span&gt;
                              &lt;/template&gt;
                              &lt;template v-slot:cell(action)=&quot;data&quot;&gt;
                                  &lt;a @click.prevent=&quot;editItem(data.index)&quot;&gt;&lt;i class=&quot;fa fa-edit&quot; aria-hidden=&quot;true&quot; title=&quot;Update product&quot; v-b-tooltip.hover&gt;&lt;/i&gt;&lt;/a&gt;
                                  &lt;a @click.prevent=&quot;assignWeights(data.index)&quot;&gt;&lt;i class=&quot;fa fa-balance-scale&quot; title=&quot;Assign weights&quot; aria-hidden=&quot;true&quot; v-b-tooltip.hover&gt;&lt;/i&gt;&lt;/a&gt;
                              &lt;/template&gt;
                          &lt;/b-table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/template&gt;
  
  </code></pre>