0

I am trying to add a customized column in bootstrap vue table component using scoped slots, but nothing happens. I have looked at some examples and done the same as them.

See fields Report and test

<b-table v-if="ShowSpinner != true && SearchReportModel.ResultModel.Success == true" class="mt-5" 
striped hover :items="SearchReportModel.ShortReportModelList" :fields="fields">
                <template v-slot:cell(Report)="data">                    
                        <b-button>{{data.item.Originator}}Rad</b-button>                   
                </template>
                <template v-slot:cell(test)="data">                  
                    <!--{{data.ShortReportModel.Id}}--><p>Test</p>               
                </template>
            </b-table>

<script>
    import '../styles/scss/_report-search.scss'
    import '../styles/scss/_main-text.scss'

    export default {
        name: 'ReportSearch',

        data: function () {
            return {
                fields: [
                    'Id',
                    'RecordType',
                    'Originator',
                    'DateOpened',
                    'Title',
                    'Report',
                    { key: 'test', label: 'testlabel'}

                ],
Karl Elmberg
  • 19
  • 4
  • 1
    The `cell(field)` syntax is new in 2.0.0, so make sure you have the newest version of bootstrap-vue installed – Hiws Sep 17 '19 at 18:43
  • Hi Hiws, I have the newest version. I made a work around and used ordinary bootstrap. My problem with latency also disappeared when I changed my List to ordinary Boostrap and for vue syntax. – Karl Elmberg Sep 19 '19 at 08:32

0 Answers0