Can't instantiate

[ruelluna]

I am having this error. Can you please tell me what's happening?

vue.common.dev.js?4650:630 [Vue warn]: Error in mounted hook: "TypeError: n.DataTable is not a function"

import VdtnetTable from 'vue-datatables-net'

export default {
        components: {
            VdtnetTable,
        },
return {
                isLoading: false,
                fullPage: true,
                options: {
                    ajax: {
                        url: '/api/parents/dataTables',
                        dataSrc: function(json) {
                            console.log(json)
                            return json.data;
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    },
                    responsive: true,
                    processing: true,
                    searching: true,
                    searchDelay: 1500,
                    destroy: true,
                    ordering: true,
                    lengthChange: true,
                    serverSide: true,
                    fixedHeader: true,
                    saveState: true,
                },
                fields: {
                    actions: {
                        isLocal: true,
                        label: 'Actions',
                        defaultContent: '<span data-action="view" class="btn btn-primary btn-sm"><i class="mdi mdi-delete"></i> View</span>' +
                            '<a href="javascript:void(0);" data-action="edit" class="btn btn-info btn-sm"><i class="mdi mdi-square-edit-outline"></i> Edit</a>'
                    },
                    lastname: { label: 'Last Name', sortable: true, searchable: true  },
                    firstname: { label: 'First Name', sortable: true, searchable: true  },
                    email: { label: 'Email', sortable: true, searchable: true  },
                },
                quickSearch: '',
                details: {
                    template: showStudents
                }
            }
        },
        methods: {
            view(data){

            },
            async doLoadTable(cb) {
                await $.getJSON( '/api/parents', function( data ) {
                    cb(data)
                })
            },
            doAlertEdit(data) {
            },
            doAlertDelete(data, row, tr, target) {

            },
            doAfterReload(data, table) {
                window.alert('data reloaded')
            },
            doSearch() {
                this.$refs.table.search(this.quickSearch)
            },
            doExport(type) {
                // const parms = this.$refs.table.getServerParams()
                // parms.export = type
                // window.alert('GET /api/v1/export?' + jQuery.param(parms))
            },
            preXhr(xhr){
                console.log(xhr)
            }
        }
}

[noogen]

Don't forget to import which theme of the datatables.net, example bootstrap4:

import 'datatables.net-bs4'

I believe if you npm install the package above, it automatically include the datatables.net jquery plugin package as dependency so importing that will also import the datatables.net jquery plugin.

[valeriy-efimov]

i have same problem but if i add \ import 'datatables.net-bs4'

got error

ERROR in ./resources/js/components/Trends.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Trends.vue?vue&type=script&lang=js&) Module not found: Error: Can't resolve 'datatables.net-bs4' in 'D:\OSPanel\domains\analytic\resources\js\components' @ ./resources/js/components/Trends.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Trends.vue?vue&type=script&lang=js&) 348:0-28 @ ./resources/js/components/Trends.vue?vue&type=script&lang=js& @ ./resources/js/components/Trends.vue @ ./resources/js sync \.vue$/ @ ./resources/js/app.js @ multi ./resources/js/app.js ./resources/sass/app.scss

[noogen]

Did you install it? Is it in your package.json?

npm install datatables.net-bs4

[acanthis]

@ruelluna did you manage to solve the problem?

[noogen]

Old issue with no updates.

[NeniEmSu]

Had the same issue while working with this in a Laravel app and this solved it for me

The controller.php in the class must contain something like this:

protected function make()
  {
    parent::make();

    $this->tplConfig->addJS([
       'dataTables',
       ...
    ]);