slot not working on b-table, showing empty colmns on custom templates

slot is not working on datatable when i am using fields object.

The problem is that the slots are not working at all with fields array on datatable, when i remove fields then it works correctly, only problem is that i am not able to add custom fields, if i use fields array i only get two rows and checkbox and actions not working at all. slot is not working on datatable when i am using fields object.

The is that the slots are not working at all with fields array on datatable, when i remove fields then it works correctly, only problem is that i am not able to add custom fields, if i use fields array i only get two rows and checkbox and actions not working at all.

my code is

<template>
  <div>
    <b-card>
      <template slot="header">
        <h3 class="card-title">{{ $t('labels.backend.quotes.titles.index') }}</h3>
        <div class="card-options" v-if="this.$app.user.can('create quotes')">
          <b-button to="/quotes/create" variant="success" size="sm">
            <i class="fe fe-plus-circle"></i> {{ $t('buttons.quotes.create') }}
          </b-button>
        </div>
      </template>
      <b-datatable ref="datasource"
          @context-changed="onContextChanged"
          search-route="admin.quotes.search"
          delete-route="admin.quotes.destroy"
          action-route="admin.quotes.batch_action" :actions="actions"
          :selected.sync="selected"
      >
        <b-table ref="datatable"
          striped
          bordered
          show-empty
          stacked="md"
          no-local-sorting
          :empty-text="$t('labels.datatables.no_results')"
          :empty-filtered-text="$t('labels.datatables.no_matched_results')"
          :fields="fields"
          :items="dataLoadProvider"
          sort-by="quotes.created_at"
          :sort-desc="true"
          checkable
        >
          <template slot="HEAD_checkbox" slot-scope="data"></template>
          <template slot="checkbox"  slot-scope="row">
            <b-form-checkbox :value="row.item.id" v-model="selected"></b-form-checkbox>
          </template>
          <template slot="quotation_number" slot-scope="row">
            <span v-text="row.item.quotation_digit"></span>-<span v-text="row.item.quotation_number"></span>
          </template>
          <template slot="quotation_name" slot-scope="row">
            <span v-text="row.item.quotation_name"></span>
          </template>
          <template slot="quotes.created_at" slot-scope="row">
            {{ row.item.created_at }}
          </template>
          <template slot="quotes.updated_at" slot-scope="row">
            {{ row.item.updated_at }}
          </template>
          <template slot="actions" slot-scope="row">
            <b-button size="sm" variant="success" :to="`/quotes/${row.item.id}/view`" v-b-tooltip.hover :title="$t('buttons.preview')" class="mr-1">
              <i class="fe fe-eye"></i>
            </b-button>
            <b-button v-if="row.item.id" size="sm" variant="primary" :to="`/quotes/${row.item.id}/edit`" v-b-tooltip.hover :title="$t('buttons.edit')" class="mr-1">
              <i class="fe fe-edit"></i>
            </b-button>
            <b-button v-if="row.item.id" size="sm" variant="danger" v-b-tooltip.hover :title="$t('buttons.delete')" @click.stop="onDelete(row.item.id)">
              <i class="fe fe-trash"></i>
            </b-button>
          </template>
        </b-table>
      </b-datatable>
    </b-card>
  </div>
</template>

<script>

export default {
  name: 'QuotesList',
  data () {
    return {
      selected: [],
      fields: [
        { key: 'checkbox' },
        { key: 'quotation_number', label: this.$t('validation.quotes.quotation_number'), sortable: true },
        { key: 'quotation_name', label: this.$t('validation.quotes.quotation_name'), sortable: true },
        { key: 'quotes.created_at', label: this.$t('labels.created_at'), 'class': 'text-center', sortable: true },
        { key: 'quotes.updated_at', label: this.$t('labels.updated_at'), 'class': 'text-center', sortable: true },
        { key: 'actions', label: this.$t('labels.actions'), 'class': 'nowrap' }
      ],
      actions: {
        destroy: this.$t('labels.backend.quotes.actions.destroy')
      }
    }
  },
  methods: {
    checkrow(rows){
      console.log(rows)
    },
    dataLoadProvider (ctx) {
      return this.$refs.datasource.loadData(ctx.sortBy, ctx.sortDesc)
    },
    onContextChanged () {
      return this.$refs.datatable.refresh()
    },
    onDelete (id) {
      this.$refs.datasource.deleteRow({ quote: id })
    }
  }
}
</script>

i don’t undertand why is it not working, before it was working fine, the same code was perfect.my package.json is

{
  "private": true,
  "scripts": {
    "clean": "rimraf public/build",
    "build": "npm run clean && webpack --mode development --progress",
    "watch": "npm run clean && npm run build -- --watch",
    "dev": "npm run clean && webpack-dev-server --mode development --hot --progress",
    "prod": "rimraf public/dist && cross-env NODE_ENV=production webpack --mode production --progress",
    "lint": "eslint --ext .js,.vue resources/assets/js"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@coreui/coreui": "^2.0.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-brands-svg-icons": "^5.3.1",
    "@fortawesome/free-regular-svg-icons": "^5.3.1",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@fortawesome/vue-fontawesome": "^0.1.1",
    "autoprefixer": "^9.1.3",
    "axios": "^0.18.0",
    "babel-eslint": "^9.0.0",
    "babel-loader": "^8.0.0",
    "bootstrap": "^4.1.3",
    "bootstrap-vue": "^2.0.0-rc.5",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "cssnano": "^4.1.0",
    "dotenv": "^6.0.0",
    "eslint": "^5.4.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-loader": "^2.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^7.0.1",
    "eslint-plugin-promise": "^4.0.0",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.0.0-beta.3",
    "file-loader": "^2.0.0",
    "flatpickr": "^4.5.7",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html2pdf.js": "^0.9.1",
    "intl-tel-input": "^13.0.3",
    "jquery": "^3.3.1",
    "lodash": "^4.17.10",
    "mini-css-extract-plugin": "^0.4.2",
    "node-sass": "^4.9.3",
    "noty": "^3.2.0-beta",
    "perfect-scrollbar": "^1.4.0",
    "popper.js": "^1.14.4",
    "postcss-loader": "^3.0.0",
    "pwstrength-bootstrap": "^3.0.1",
    "resolve-url-loader": "^2.3.0",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.1.0",
    "slick-carousel": "^1.8.1",
    "style-loader": "^0.23.0",
    "sweetalert2": "^7.26.12",
    "turbolinks": "^5.2.0",
    "url-loader": "^1.1.1",
    "vue": "^2.5.15",
    "vue-i18n": "^8.0.0",
    "vue-loader": "^15.4.1",
    "vue-perfect-scrollbar": "^0.1.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.17",
    "vuex": "^3.0.1",
    "webfontloader": "^1.6.28",
    "webpack": "^4.17.1",
    "webpack-bundle-analyzer": "^2.11.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7",
    "webpack-manifest-plugin": "^2.0.3",
    "webpack-notifier": "^1.6.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "html2canvas": "^1.0.0-alpha.12",
    "jspdf": "^1.4.1",
    "moment": "^2.22.2",
    "npm-watch": "^0.6.0",
    "popper": "^1.0.1",
    "rasterizehtml": "^1.3.0",
    "vue-flatpickr-component": "^8.1.2",
    "vue-gallery": "^1.5.0",
    "vue2-dropzone": "^3.5.2"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

and i am getting this result on view

[tmorehouse]

As for the slots try:

          <template v-slot:head(checkbox)="data"></template>
          <template v-slot:cell(checkbox)="row">
            <b-form-checkbox :value="row.item.id" v-model="selected"></b-form-checkbox>
          </template>
          <template v-slot:cell(quotation_number)="row">
            <span v-text="row.item.quotation_digit"></span>-<span v-text="row.item.quotation_number"></span>
          </template>
          <template v-slot:cell(quotation_name)="row">
            <span v-text="row.item.quotation_name"></span>
          </template>
          <template v-slot:cell(quotes.created_at)="row">
            {{ row.item.created_at }}
          </template>
          <template v-slot:cell(quotes.updated_at)="row">
            {{ row.item.updated_at }}
          </template>
          <template v-slot:cell(actions)="row">
            <b-button size="sm" variant="success" :to="`/quotes/${row.item.id}/view`" v-b-tooltip.hover :title="$t('buttons.preview')" class="mr-1">
              <i class="fe fe-eye"></i>
            </b-button>
            <b-button v-if="row.item.id" size="sm" variant="primary" :to="`/quotes/${row.item.id}/edit`" v-b-tooltip.hover :title="$t('buttons.edit')" class="mr-1">
              <i class="fe fe-edit"></i>
            </b-button>
            <b-button v-if="row.item.id" size="sm" variant="danger" v-b-tooltip.hover :title="$t('buttons.delete')" @click.stop="onDelete(row.item.id)">
              <i class="fe fe-trash"></i>
            </b-button>
          </template>

[tmorehouse]

If you are using BootstrapVue v2.x.x (not the v2.0.0-rc.## releases), the table slot names were changed to be more compatible with Vue 2.6. new v-slot syntax.

See the changelog and migration guide at https://bootstrap-vue.org/docs/reference/changelog#v200

Instead of using slot name actions use slot name cell(actions), and instead of HEAD_checkbox use head(checkbox)