how to display data from props in b-table template tag?

Question

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.

please let me know where is mistake in my code?

Products.vue (script tag)

    <script>
    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'
                        }
                    ],
                   
        }

</script>

Product.vue (template tag)

    <template>
        <div class="row">
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{title}}</h3>
                        <div class="card-tools">
                            <b-button variant="primary" @click="newItem">New {{singular}}</b-button>
                            <div></div>
                        </div>
                    </div>
                     <div class="card-body table-responsive p-0">
                        <spinner v-if="$root.loading"></spinner>
                        <b-table ref="table" v-for="type in this.products" :items="type" :key="type.id" :fields="fields" bordered hover :head-variant="'light'" responsive="sm" v-else>
                            <template v-slot:cell(index)="type">
                                {{ type.index + 1 }}
                            </template>
                            <template v-slot:cell(name)="type">
                                <b-img thumbnail fluid :src="getImageUrl(type.image)" alt="Image 1" class="thumb-img"></b-img>
                                {{type.name}}
                            </template>
                            <template v-slot:cell(weights)="type">
                                <span v-weights="type.item"></span>
                            </template>
                            <template v-slot:cell(default_weight)="type">
                                <span v-floatFormatter="type.default_weight"></span>{{type.unit.sname}}
                            </template>
                            <template v-slot:cell(status)="type">
                                <span v-if="type.status" class="text-success text-bold">Active</span>
                                <span class="text-danger" v-else>Inactive</span>
                            </template>
                            <template v-slot:cell(action)="data">
                                <a @click.prevent="editItem(data.index)"><i class="fa fa-edit" aria-hidden="true" title="Update product" v-b-tooltip.hover></i></a>
                                <a @click.prevent="assignWeights(data.index)"><i class="fa fa-balance-scale" title="Assign weights" aria-hidden="true" v-b-tooltip.hover></i></a>
                            </template>
                        </b-table>
                    </div>
                </div>
            </div>
        </div>
    </template>

Answer 1

v-for="type in this.products" - try to delete this key. In template tag do not use this keyword to access data or any other values.

I have spotted you pass data completely wrong way. Please use below variant and tell me if it work. EDITED template:

<template>
    <div class="row">
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{title}}</h3>
                <div class="card-tools">
                    <b-button variant="primary" @click="newItem">New {{singular}}</b-button>
                    <div></div>
                </div>
            </div>
            <div class="card-body table-responsive p-0">
                <spinner v-if="$root.loading"></spinner>
                <b-table ref="table" :items="products" :fields="fields" bordered hover :head-variant="'light'" responsive="sm" v-else>
                    <template v-slot:cell(index)="data">
                        {{ data.index + 1 }}
                    </template>
                    <template v-slot:cell(name)="data">
                        <b-img thumbnail fluid :src="getImageUrl(data.image)" alt="Image 1" class="thumb-img"></b-img>
                        {{data.name}}
                    </template>
                    <template v-slot:cell(weights)="data">
                        <span v-weights="data.item"></span>
                    </template>
                    <template v-slot:cell(default_weight)="data">
                        <span v-floatFormatter="data.default_weight"></span>{{data.unit.sname}}
                    </template>
                    <template v-slot:cell(status)="data">
                        <span v-if="data.status" class="text-success text-bold">Active</span>
                        <span class="text-danger" v-else>Inactive</span>
                    </template>
                    <template v-slot:cell(action)="data">
                        <a @click.prevent="editItem(data.index)"><i class="fa fa-edit" aria-hidden="true" title="Update product" v-b-tooltip.hover></i></a>
                        <a @click.prevent="assignWeights(data.index)"><i class="fa fa-balance-scale" title="Assign weights" aria-hidden="true" v-b-tooltip.hover></i></a>
                    </template>
                </b-table>
            </div>
        </div>
    </div>
</template>

Answer 2

I tried a lot, after all this, my code is working correctly now, this given below code is the right solution.

    <b-table ref="table" :items="products" :fields="fields" bordered hover :head-variant="'light'" responsive="sm" v-else>
                            <template v-slot:cell(index)="data">
                            {{ data.index+1 }}
                            </template>
                            <template v-slot:cell(name)="data">
                            <b-img thumbnail fluid :src="getImageUrl(data.item.image)" alt="Image 1" class="thumb-img"></b-img>
                            {{data.item.name}}
                            </template>
                            <template v-slot:cell(weights)="data">
                            <span v-weights="data.item"></span>
                            </template>
                            <template v-slot:cell(default_weight)="data">
                            <span v-floatFormatter="data.item.default_weight"></span>{{data.item.unit.sname}}
                            </template>               
                            <template v-slot:cell(status)="data">
                            <span v-if="data.status" class="text-success text-bold">Active</span>
                            <span class="text-danger" v-else>Inactive</span>
                            </template>
                            <template v-slot:cell(action)="data">
                            <a @click.prevent="editItem(data.item.id)"><i class="fa fa-edit" aria-hidden="true" title="Update product" v-b-tooltip.hover></i></a>
                            <a @click.prevent="assignWeights(data.item.id)"><i class="fa fa-balance-scale" title="Assign weights" aria-hidden="true" v-b-tooltip.hover></i></a>
                            </template>
                        </b-table>