Editor in vue

Editor in vue

kkenyonkkenyon Posts: 2Questions: 1Answers: 0

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?

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • kkenyonkkenyon Posts: 2Questions: 1Answers: 0
    edited June 2020

    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
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Thanks,
    Allan

  • Chandler242Chandler242 Posts: 36Questions: 12Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • Chandler242Chandler242 Posts: 36Questions: 12Answers: 0

    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

This discussion has been closed.