DataTables / Vue

Vue plugin for DataTables
MIT License
64 stars 12 forks source link

Update to the Documentation #14

Open PeterPilley opened 1 year ago

PeterPilley commented 1 year ago

Hi was battling with this today after following the docs and not getting the same result.

I had to return Table in setup() to be able to call in within onMounted if I followed the docs as written I was not able to access table.value.dt();

Happy to do a proper write up for the docs if needed

AllanJard commented 1 year ago

Hi,

Yes, if you could elaborate further for me, that would be great. I've had the code from here running okay (there are links to Stackblitz examples in the post).

Thanks!

PeterPilley commented 1 year ago

Thanks for coming back so quickly.

I had it running in your example here as well, using the same example you had provided. Link: https://stackblitz.com/edit/datatables-net-vue3-ajax-cskffu?file=src/App.vue

However when I tried to do this in my own code I would receive an error that dt is undefined. The only way I could get around this was to structure my setup() like this

        const table = ref();
        let dt;

        onMounted(function ()  {

            // Update the logging datatable
            // to ensure new data is captured
            // and displayed
            dt = table.value.dt();
            dt.ajax.reload(null, false);
        })
        return { table }

I checked my package.json to confirm I was using the latest versions

    "datatables.net-buttons": "^2.3.3",
    "datatables.net-dt": "^1.13.1",
    "datatables.net-select": "^1.5.0",
    "datatables.net-vue3": "^2.0.0",
    "vue": "^3.2.44"

Does that make sense?

AllanJard commented 1 year ago

Was it dt = table.value.dt(); that was reporting undefined? I don't actually see why return {table} would change that?

PeterPilley commented 1 year ago

Was it dt = table.value.dt(); that was reporting undefined? I don't actually see why return {table} would change that?

Yes it was reporting on dt = table.value.dt();

The only difference I can see in the scripts is stackblitz has lang='ts' but I dont see how that would affect it.

as soon as I returned table from Setup I was able to access and manipulate the datatable.

AllanJard commented 1 year ago

Are you able to build a little demo repo that shows the issue so I can dig into it?