Opening Bootstrap Modal with row action button

[pututbawono]

I'm trying to open a bootstrap modal with a row action button I created by using Yajra Laravel server-side, but no success. Actually it's working with "normal" Vue button (i.e. rendered in the Vue component), but it's not working with button rendered with server-side Laravel.

I'm guessing that I have to use vdtnet templating to achieve this, but I ran into another error. So, I defined a dummy row action button using the fields property, with defaultContent : '' (empty) and then do the template. But it gave me an error Cannot read property 'compile' of undefined.

I tried also without using the slot object ctx (i.e. just <button>Open Modal</button>, but still the same error.

Please help, thanks.

[noogen]

I need more to go on troubleshooting. Would you have example code demonstrating/recreating the error? I don't need server-side, only client-side code that demonstrate the error.

[pututbawono]

Actually I've solved it by changing from Bootstrap modal (which use jQuery), to a more "native" Vue modal, using example from the official docs, but I still haven't figured out the error though. So, I define my fields property like this :

fields : {
    nama_merk: {label: 'Nama Merk'},
    jenis_id: {label: 'Jenis Peralatan', name: 'jenis.nama_jenis'},
    fasilitas: {label: 'Fasilitas'},
    jumlah_group: {label: 'Jumlah Group Peralatan Aktif', data: 'jumlah_group', className: 'w-15'},
    aksi: {label: 'Aksi', isLocal: true, className: 'w-15', defaultContent: ''}, // this one is the dummy row action column
},

Then, in the template, I write this :

<vdtnet-table
    // params...
>
   <template
       slot="aksi"
       slot-scope="ctx"
   >
        <button>Click Me</button>
   </template>
</vdtnet-table>

I intentionaly don't use any ctx object inside the template, just for the sake of testing. This gave me the error like I mentioned before.

[noogen]

I'm suspecting your error is related to this line - https://github.com/niiknow/vue-datatables-net/blob/master/src/VdtnetTable.vue#L469 which may totally be unrelated to defining defaultContent of empty. This mean it cannot find Vue on the window. Can you set Vue to the window object or assign vdtnet-table with the copy of your vue? Something like so:

<template>
<vdtnet-table
:vue="yourVue"
... other stuff omitted ...>... template and other stuff omitted...</vdtnet-table>
</template>
<script>
import Vue from 'Vue'

export default {
   data() {
     return { 
        yourVue: Vue
    }
   }
}
</script>

[pututbawono]

Yes! It's working now with passing Vue parameter to the vdtnet. A bit weird though, that it needs to be passed another Vue when in fact Vue is already present in the window. And also, it turns out that I don't have to define empty defaultContent after all, just need to define the dummy column name, and it will be rendered by vdtnet native templating.

Thanks for the help!

[noogen]

Stale issue.