laravel - 引导表不适用于 vue 和 laravel

Question

试图将BootstrapTable添加到某个组件，但它给了我

TypeError: Cannot call a class as a function

当调用

 <BootstrapTable ref="table"/>

我也在使用 laravel 我的 app.js

    require('./bootstrap');

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.css'

import jQuery from 'jquery'
window.$ = jQuery

//import Vue from 'vue'
import 'bootstrap'
import 'bootstrap-table/dist/bootstrap-table.js'
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'

window.Vue = require('vue');

import VueRouter from 'vue-router';
import { routes } from './routes';

Vue.use(VueRouter);


const router = new VueRouter({
    mode: 'history',
    routes
});


Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('dashboard', require('./components/Dashboard').default);
Vue.component('BootstrapTable', BootstrapTable)


const app = new Vue({
    router
}).$mount('#app');

和组件vue

    <template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">Example Dashboard</div>

          <div class="card-body">
            <BootstrapTable :columns="columns" :data="data" :options="options"></BootstrapTable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BootstrapTable from "bootstrap-table";
export default {
  components: {
    BootstrapTable: BootstrapTable
  },
  data() {
    return {
      columns: [
        {
          title: "Item ID",
          field: "id"
        },
        {
          field: "name",
          title: "Item Name"
        },
        {
          field: "price",
          title: "Item Price"
        }
      ],
      data: [
        {
          id: 1,
          name: "Item 1",
          price: "$1"
        },
        {
          id: 2,
          name: "Item 2",
          price: "$2"
        },
        {
          id: 3,
          name: "Item 3",
          price: "$3"
        },
        {
          id: 4,
          name: "Item 4",
          price: "$4"
        },
        {
          id: 5,
          name: "Item 5",
          price: "$5"
        }
      ],
      options: {
        search: true,
        showColumns: true
      }
    };
  },
  mounted() {
    console.log("Dashboard mounted.");
  }
};
</script>

请帮忙？非常感谢提前。

标签： laravelvue.js