Editor in vue

kkenyon

I am trying to use Editor in a Vue Component. I have datatables working fine but editor is causing a problem. The pertinent info is below.
In the main file i am importing everything
I have extended jquery to vue via
Object.defineProperty(Vue.prototype, '$jquery', {value: jQuery});

In my mount I am calling a function that does this
self.$jquery.editor = new $.fn.dataTable.Editor( {
options
});

This same type of code works for datatables but editor throws the following error.
[Vue warn]: Error in mounted hook: "TypeError: undefined is not an object (evaluating 'new self.$jquery.fn')

Again this same code launches datatables without issue. What am I missing?

allan

Can you show me the full back trace please? I'm not actually clear on which line is causing the error - is it throwing on the new $.fn.dataTable.Editor?

When I've used DataTables / Editor in Vue myself, I haven't extended the Vue prototype like that, so I'm not quite show what the intention is there?

Thanks,
Allan

kkenyon

Here is the full error. I have also tried direct imports of jQuery though I have not needed it elsewhere but this is the only constructor statement I have in a vue component so I am guessing there is something I just don't know

TypeError: self.$jquery.fn.dataTable.Editor is not a constructor
    dataTable DtStudentSubscriptions.vue:50
    mounted DtStudentSubscriptions.vue:35
    VueJS 12
        invokeWithErrorHandling
        callHook
        insert
        invokeInsertHook
        patch
        _update
        updateComponent
        get
        run
        flushSchedulerQueue
        nextTick
        flushCallbacks
vue.esm.js:1897
    VueJS 15
        logError
        globalHandleError
        handleError
        invokeWithErrorHandling
        callHook
        insert
        invokeInsertHook
        patch
        _update
        updateComponent
        get
        run
        flushSchedulerQueue
        nextTick
        flushCallbacks

allan

How are you importing jQuery, DataTables and Editor please? That error suggests that jQuery and DataTables are present, but Editor is not.

Thanks,
Allan

Chandler242

Hey Allan,

I noticed that you have used DataTables / Editor in Vue. Do you mind sharing your approach? I tried different ways discussed here

https://github.com/vuejs/vue/issues/423 and

https://gist.github.com/bseib/bb4ea32731376318a545d527752f88a1

Somehow I couldn't get it work. Could you offer some comments?

Regards,

YL

allan

Sure - thus far I've taken a fairly simple approach which is, in the template use:

<table class="myTable" v-once/>

Then in the template's Javascript use DataTables' initialise as normal inside the mounted life cycle hook. I haven't thus far use reactive Vue data inside the DataTable (I haven't needed to) - just loading data over Ajax per the "normal" approach with DataTables.

This is the approach that I've used for all of the DataTables inside CloudTables application pages.

Allan

Chandler242

Allan,

Sorry I didn't see your response earlier. I had checked a few times in the last couple of weeks and must have missed your response.

My goal was to wrap DataTables including Edit in a Vue component. It proved to be too hard and messy to me. I have tried 3 solutions I found online I haven't succeeded on any of them. After a couple of months spending much time on it I have pretty much given up for now. Hopefully there will be a feasible solution in future.

Thanks again for your response.

YL