如何在 b-table 模板标签中显示来自道具的数据？

Posted 2023-02-23

【中文标题】如何在 b-table 模板标签中显示来自道具的数据？

【英文标题】：how to display data from props in b-table template tag?

【发布时间】：2021-03-20 14:02:59

【问题描述】：

我是 vue.js 的新手，在 b-table 中显示数据时遇到了一些问题。我从数据库中获取的数据正确。我从一个文件传递到 products.vue 并在 products.vue 中接收数据作为道具。当我控制台时，我的数据在控制台中正确显示，但是当我以前在 b 表中显示数据时，我遇到了一些问题。数据显示不正确。

请告诉我我的代码哪里出错了？

Products.vue（脚本标签）

    <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>
        <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)"  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>

【参考方案1】：

我尝试了很多，毕竟，我的代码现在可以正常工作了，下面给出的代码是正确的解决方案。

    <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)"  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>

【参考方案2】：

v-for="type in this.products" - 尝试删除 this 键。在模板标签中不要使用this 关键字来访问数据或任何其他值。

我发现您以完全错误的方式传递数据。请使用以下变体并告诉我它是否有效。 已编辑模板：

<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)"  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>

【讨论】：

我没有在模板标签中使用这个关键字

我在答案开头提到了粗体。 this.products 是不可接受的。将其更改为v-for="type in products"

如果这解决了您的问题，请将答案设置为已接受:)

如何在模板中使用标签打印数据？

我已经编辑了我的答案。请测试是否有帮助。