[Vuejs]-How to display data from props in b-table template tag?

0๐Ÿ‘

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>

0๐Ÿ‘

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>

Leave a comment